Javascript 使用值筛选下拉菜单

在javascript中，是否可以仅使用value属性根据另一个字段菜单过滤下拉菜单

我的意思是，我有以下代码，它是由django框架构建的：

<p><label for="id_country">Country :</label> <select id="id_region" name="region">
<option value="" selected="selected">---------</option>
<option value="1">USA</option>
<option value="2">France</option>
</select></p>
<p><label for="id_region">Region :</label> <select id="id_city" name="city">
<option value="" selected="selected">---------</option>
<option value="1">California</option>
<option value="2">New-York</option>
<option value="3">Oregon</option>
<option value="4">Tenessee</option>
<option value="5">Paris</option>
<option value="6">Bretagne</option>
...

---

您需要每秒

选择

$("#id_region").change(function(){
    $("#id_city option[value!='']").hide();
    if($(this).val()==1){
        $("#id_city option").each(function(){
            if($(this).val() >=1 && 4>=$(this).val()){
                $(this).show();
            }
        });
    }
    if($(this).val()==2){
        $("#id_city option").each(function(){
            if($(this).val() >=5 && 6>=$(this).val()){
                $(this).show();
            }
        });
    }
});

您可以使用如下全局选项：

var options = {
    'USA' : { 1 : 'California', 2 : 'New York', 3 : 'Oregon', 4 : 'Tenessee' },
    'France' : { 5 : 'Paris', 6 : 'Bretagne' }
};

通过这种方式继续添加区域要容易得多

然后每次
id\u区域
更改时，您都会生成选项：


var选项={
‘美国’：{1:‘加利福尼亚’、2:‘纽约’、3:‘俄勒冈州’、4:‘特内西’}，
法国：{5:'巴黎'，6:'布雷塔尼'}
};
$（'#id_region'）。在（'change'，function（）上{
//清洁选项列表
$（'id_city'）.empty（）；
//构建选项列表
var cities=options[$（'#id#u region option:selected'）。text（）；
for（城市风险值指数）{
$（''+城市[索引]+''）。附加到（''id_城市'）；
}
});

国家：
---------
美国
法国

地区：
拥有一个健壮的代码是一个有趣的方法，但是如果我写世界上所有的城市和地区，它不会减缓页面的加载吗？你应该只添加你需要的城市。如果要添加世界上所有的城市，那么可以通过AJAX请求所选国家的城市。这样你只需要在需要的时候加载你需要的东西。
var options = {
    'USA' : { 1 : 'California', 2 : 'New York', 3 : 'Oregon', 4 : 'Tenessee' },
    'France' : { 5 : 'Paris', 6 : 'Bretagne' }
};