根据其他 select 从 select 过滤数据

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>

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

Answer 1

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

但如果你仍然使用 html rendrerd select ，你可以隐藏没有相同父 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>

根据其他 select 从 select 过滤数据

Filter data from select depending on other select

javascript

html

jquery

laravel

html-select