javascript - 使用两个选择控件编辑表单，以便在首次启动时进行过滤

Question

我有一个包含两个选择控件的编辑表单。

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

第一个显示一个国家/地区的州，第二个应该显示在第一个选择控件中选择的州的城市。

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

这种情况已经完成并且工作正常。每次我更改第一个控件的状态时，第二个控件都会更改并仅显示所选状态的城市。

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

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

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

这是我的代码:

第一个控制，状态:

      <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>

调用 PHP 文件来刷新第二个控件的 JavaScript:

<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

如果我是你，我会简单地更改生成编辑表单的查询以限制所选州的城市列表，但如果您不想或不知道如何执行此操作，您可以简单地触发更改功能您所在州的过滤器选择在文档加载时选择您所在城市的过滤器...这是该文件的 js 代码...

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