编辑窗体，并在第一次启动时筛选两个选择控件

Question

我有一个编辑表单，其中包括两个Select控件。

它们都是从远程数据库中填充的。

第一个显示一个国家的状态，第二个应该显示在第一个选择控制下选择的州的城市。

如果我更改了第一个控件的状态，则第二个控件将被过滤，并且只允许从所选的状态中选择城市。

这种情况已经解决了，而且运作良好。每次我在第一个控件中更改状态时，第二个控件就会更改，并且只显示来自所选状态的城市。

我的问题是，它是一个“编辑”表单，所显示的州和城市是记录中的当前值。

如果我想更改城市，第二个控件将显示数据库中的所有城市，而不仅仅是来自第一个控件的状态值的城市。

当表单第一次加载时，我不知道如何过滤第二个控件，它首先显示当前的城市值，但该控件允许从当前状态值中选择每个其他城市，而不仅仅是城市。

这是我的密码：

第一次管制，国家：

      <div class="form-group">
        <label for="comunidad_enclave" class="col-sm-2 control-label">Comunidad Autónoma</label>
        <div class="col-sm-10">
        <select name="comunidad_enclave" onChange="getCities(this.value)">
          <?php 
do {  
?>
          <option value="<?php echo $row_RSComunidades['id_comunidad']?>" <?php if (!(strcmp($row_RSComunidades['id_comunidad'], htmlentities($row_Recordset1['comunidad_enclave'], ENT_COMPAT, 'UTF-8')))) {echo "SELECTED";} ?>><?php echo $row_RSComunidades['nombre_comunidad']?></option>
          <?php
} while ($row_RSComunidades = mysql_fetch_assoc($RSComunidades));
?>
        </select>
      </div>
      </div>

第二控制，城市：

 <div class="form-group">
        <label for="provincia_enclave" class="col-sm-2 control-label">Provincia</label>
        <div class="col-sm-10">
        <select name="provincia_enclave" id="cities-list">
          <?php 
do {  
?>
          <option value="<?php echo $row_RSProvincias['id_provincia']?>" <?php if (!(strcmp($row_RSProvincias['id_provincia'], htmlentities($row_Recordset1['provincia_enclave'], ENT_COMPAT, 'UTF-8')))) {echo "SELECTED";} ?>><?php echo $row_RSProvincias['nombre_provincia']?></option>
          <?php
} while ($row_RSProvincias = mysql_fetch_assoc($RSProvincias));
?>
        </select>
      </div>
      </div>

JavaScript，它调用一个PHP文件来刷新第二个控件：

<script>
function getCities(val) {

    $.ajax({
    type: "POST",
    url: "get_contacts_po.php",
    data:'client_id='+val,
    success: function(data){
        $("#cities-list").html(data);
    }
    });
}
</script>

欢迎任何帮助。谢谢。

Answer 1

如果我是您，我只需更改生成编辑表单的查询，以限制所选状态上的城市列表，但如果您不想或不知道如何做，您可以简单地触发州select的更改函数，以便在加载文档时使城市筛选器进行选择……这是那个的js代码。

$( document ).ready(function(){
    $("#comunidad_enclave").trigger('change'); //this triggers change event of comunidad_enclave select so that it will fire getCities function
});