使用值过滤下拉菜单

filtering drop down menu using value

本文关键字：下拉菜单 过滤      更新时间：2023-09-26

是否有可能在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>
...

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

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

你需要每秒钟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/

你可以像这样使用全局选项:

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

继续添加区域要容易得多。

然后每次id_region发生变化时都创建选项:

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');
        }
    });
<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">

相关文章：