Question

我有两个 select 项目。第一个有城市列表的。

<select class="form-control" style="width: 100%;" name="city">
  <option value="1" id="vil_1">Qoraqalpog‘iston respublikasi</option>
  <option value="2" id="vil_2">Andijon viloyati</option>
  <option value="3" id="vil_3">Buxoro viloyati</option>
 </select>

下一个是属于城市的地区列表。

 <select class="form-control" style="width: 100%;" name="region">
     <option value="15" id="reg_15" parent="1">Amudaryo tumani</option>
     <option value="16" id="reg_16" parent="1">Beruniy tumani</option>
     <option value="17" id="reg_17" parent="1">Qorauzoq tumani</option>
     <option value="32" id="reg_32" parent="2">Andijon tumani</option>
     <option value="33" id="reg_33" parent="2">Baliqchi tumani</option>
     <option value="34" id="reg_34" parent="2">Bo`z tumani</option>
  </select>

如何设置第二个选择选项的列表，其父 ID 等于第一次选择中所选城市的值？

Answer 1

最好将其发送为，来自服务器端的 json 对象，城市变化的渲染区域选项，使用发送的数组，

但是如果你仍然使用 html rendrerd select ，你可以隐藏没有相同 parent id 的选项，这里我使用 jquery secipt 来显示结果如下：

注意：在 HTML 生成中使用 data-parent 代替父级阅读更多 html data attibute

片段：

$(function() {
  

  // ref to city selector
  var $selectCity = $("select[name='city']");
  // ref to region selector
  var $regionSelect = $("select[name='region']");
  
  // get city startup value
  var cityValue =  $selectCity.val();
  $regionSelect.val("");
  // set selection on region select by hiding options
  $regionSelect.find(`option[data-parent!=${cityValue}]`).hide();

  //change listener to set region option based on city value 
  $selectCity.on("change", function(e) {
    var value = e.target.value;
    $regionSelect.val("");
    $regionSelect.find(`option`).hide(); // hide all
    $regionSelect.find(`option[data-parent=${value}]`).show();

  });



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" style="width: 100%;" name="city">
  <option value="1" id="vil_1">Qoraqalpog‘iston respublikasi</option>
  <option value="2" id="vil_2">Andijon viloyati</option>
  <option value="3" id="vil_3">Buxoro viloyati</option>
</select>
<br><br> The next one has regions list which belongs to cities.

<select class="form-control" style="width: 100%;" name="region">
  <option value="15" id="reg_15" data-parent="1">Amudaryo tumani</option>
  <option value="16" id="reg_16" data-parent="1">Beruniy tumani</option>
  <option value="17" id="reg_17" data-parent="1">Qorauzoq tumani</option>
  <option value="32" id="reg_32" data-parent="2">Andijon tumani</option>
  <option value="33" id="reg_33" data-parent="2">Baliqchi tumani</option>
  <option value="34" id="reg_34" data-parent="2">Bo`z tumani</option>
</select>

根据其他选择过滤来自选择的数据

1 个答案: