根据其他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>

如何设置第二次选择选项的集合列表，其中父id等于第一次选择中所选城市的值?

Answer 1

最好将其作为json对象从服务器端发送，在城市更改时使用发送数组呈现区域选项，

但是如果你仍然使用html render_select，你可以隐藏不具有相同父id的选项，这里我使用jquery脚本显示如下结果:

注意:在HTML生成中使用data-parent代替parentHTML数据属性

片段:

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