Question

在javascript中是否可以仅使用值属性过滤基于另一个字段菜单的下拉菜单？

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

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

我必须过滤值，但只使用值的数字，但我想正确地做。我们可以这样写：

if(id_country == USA) 
    then:
        id_region_value between 1 and 4
if(id_country == France)
    then:
        id_region_value between 5 and 6

Answer 1

您需要每秒select

$("#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();
            }
        });
    }
});

http://jsfiddle.net/lTasty/46xLzgqm/

Answer 2

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

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

这种方式更容易继续添加区域。

然后每次id_region更改时都会构建选项：

＆＃13;

var options = {
        'USA' : { 1 : 'California', 2 : 'New York', 3 : 'Oregon', 4 : 'Tenessee' },
        'France' : { 5 : 'Paris', 6 : 'Bretagne' }
    };

$('#id_region').on('change', function(){
        //clean optionList
        $('#id_city').empty();
        //build optionList
        var cities = options[$('#id_region option:selected').text()];
        for(var index in cities){
            $('<option value= "' + index + '">' + cities[index] + '</option>').appendTo('#id_city');
        }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">

＆＃13;

使用值过滤下拉菜单

2 个答案: