logo标签列表

jQuery each循环仅执行一次

jqueryhtml
5
<script type="text/javascript">
    $(document).ready(function () {
        var country = ["United States", "Canada", "Australia", "United Kingdom"];
        var state = {
            "United States": "Alaska",
            "United States" : "Alabama"
        };
        $(this).click(function () {
            if ($.inArray($(this).val(), country)) {
                $.each(state, function (key, val) {
                    if ($("#country").val() == key) {
                        $("#state").append("<option value=" + val + ">" + val + "</option>");
                    }
                });
            }
        });
    });
</script>

基本上，我想做的是，在国家的多选框中，根据用户点击的国家来填充“#state”，目前它只显示多选框中的第一项“阿拉斯加”。
我不太确定我做错了什么。
创建一个JS Fiddle或Stack Snippet。 - Ashley Medway
1
$(this).click(function(){ 点击什么？在你的情况下是 document。 - Jai
你的 state 对于键“美国”包含不同的值。 - icke
请不要使用“state”来表示英国。 - DickieBoy
状态只是我用来保存不同国家领土的变量。 - Anthony Vasquez
3个回答
5

您不能做以下操作：

var state = {
    "United States" : "Alaska",
    "United States" : "Alabama"
};

一个对象中的键必须是唯一的。你的第二个"United States"键覆盖了第一个"United States"键，使你的对象只剩下:

var state = {
    "United States" : "Alabama"
};

相反，您需要存储一个对象，将国家映射到状态：

var state = {
    "United States" : ["Alaska", "Alabama"],
    "United Kingdom" : ["Scotland", "England"] // "states" in the UK?
};

然后根据需要修改您的点击处理程序：

$(this).click(function () {
    if ($.inArray($(this).val(), country)) {
        $.each(state, function (key, val) {
            if ($("#country").val() == key) {
                $.each(val, function (i, name) { 
                    $("#state").append("<option value=" + name + ">" + name + "</option>");
                });
            }
        });
    }
});

注意:

  1. 你的 $(this).click() 选择器很可能有误。它可能应该是一个ID或类选择器（例如$('#your_id')，$('.your-class')）。

  2. 在添加到 $('#state') 之前，你可能需要先 清空 它。为此，在点击处理程序中添加 $(this).children().remove()（但在循环外部）。

  3. 我不确定为什么要保留一个包含国家名称以及将国家名称映射到州的对象数组；可以放弃 country，只需使用 state 的键来获取国家。

  4. 请记住，对于多选 $().val() 返回一个结果数组，而不是单个值。

考虑到所有这些注意事项，并进行一些杂项整理，这是我想出的代码：

$(document).ready(function () {
    var countries = {
        "United States": ["Alaska", "Alabama"],
        "United Kingdom": ["Scotland", "England"] // "states" in the UK?
    };

    // SETUP: Ignore this bit.
    Object.keys(countries).forEach(function (val) {
       $('#multiselect').append('<option value="' + val + '">' + val + '</option>');
    });
    // END SETUP.

    $('#multiselect').change(function () {
        var vals = $(this).val();
        var states = $('#state');
        
        states.children().remove();
        
        jQuery.each(vals, function (i, name) {          
            var country = countries[name];
            
            jQuery.each(country, function (i, val) {
                states.append('<option value="' + val + '">' + val + '</option>');
            });
        });
    });    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select multiple="multiple" id="multiselect"></select>
<select multiple="multiple" id="state"></select>

看它在这里工作： http://jsfiddle.net/6dnbgf24/1/
2
很好的“笔记”，实际上是一个完整的答案。 - Ashley Medway
嗨，马特，#states 也是一个多选项。 - Anthony Vasquez
最后一个请求，当选择两个国家时，在＃states下会重复某些州。 - Anthony Vasquez
@AnthonyVasquez：1）你需要取消注释states.children().remove();，否则每次重新选择一些新的国家时，州将被附加到#state中，而不清除以前存在的州。2）正如我之前所说的，当在多选列表上调用时，$().val()返回一个数组，这就是为什么您在为#state中的每个国家生成标题时看到重复的国家名称。要解决这个问题，在那里使用val而不是$('#country').val()。一旦你做出了这些改变，它似乎可以工作；http://jsfiddle.net/tfcvm2uc/1/ - Matt
@Matt，如果可能的话，我希望能够选择多个国家，而不重复任何数据。 - Anthony Vasquez
显示剩余7条评论
3

不可以使用相同的键设置多个值，您需要将这些值封装到一个数组中，如下所示：

var state = {
"United States" : ["Alaska", "Alabama"]
};

然后根据需要更新你的代码：

$.each(state, function(key, val){           
    for( var i in val){
        $("#state").append("<option value="+val[i]+">"+val[i]+"</option>");
        }
    });

上述代码尚未经过测试，可能存在未匹配的括号。
1
非常好用，你救了我的一天。 - Anthony Vasquez
0
你可以这样做。
<!DOCTYPE html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var myJson = {
    "country": [
        {
            "name": "United States",
            "id": "usa",
            "states": [
                {
                    "name": "State 1 USA",
                    "id": "usaState1",
                    "cid": "usa",
                    "cities": [
                        {
                            "name": "City 1",
                            "id": "usaState1City1",
                            "area": "12345 sqkm"
                        },
                        {
                            "name": "City 2",
                            "id": "usaState1City2",
                            "area": "12345 sqkm"
                        }
                    ]
                },
                {
                    "name": "State 2 USA",
                    "id": "usaState2",
                    "cid": "usa",
                    "cities": [
                        {
                            "name": "City 3",
                            "id": "usaState2City3",
                            "area": "12345 sqkm"
                        },
                        {
                            "name": "City 4",
                            "id": "usaState2City4",
                            "area": "12345 sqkm"
                        }
                    ]
                }
            ]
        },
        {
            "name": "Australia",
            "id": "aus",
            "states": [
                {
                    "name": "State 1 Australia",
                    "id": "ausState1",
                    "cid": "aus",
                    "cities": [
                        {
                            "name": "City 5",
                            "id": "ausState1City5",
                            "area": "12345 sqkm"
                        },
                        {
                            "name": "City 6",
                            "id": "ausState1City6",
                            "area": "12345 sqkm"
                        }
                    ]
                },
                {
                    "name": "State 2 Australia",
                    "id": "ausState2",
                    "cid": "aus",
                    "cities": [
                        {
                            "name": "City 7",
                            "id": "ausState2City7",
                            "area": "12345 sqkm"
                        },
                        {
                            "name": "City 8",
                            "id": "ausState2City8",
                            "area": "12345 sqkm"
                        }
                    ]
                }
            ]
        }
    ]
}


$(document).ready(function(){
$.each(myJson.country, function (index, value) {
    //alert(value.name);
    $("#country").append('<option value="'+value.id+'">'+value.name+'</option>');
});

$("#country").click(function () { 
      var countryId = $(this).val();

        if(cntryId !=''){
           $('#selectedvalue').val($(this).val());
        }else{
           $('#selectedvalue').val($(this).val());
        }
      var cntryId   =$('#selectedvalue').val();
      var exist     = cntryId.indexOf(','); 
      if(parseInt(exist) > 0){
           $("#state").html('');
          var array     = cntryId.split(",");
          $.each(array,function(i){  
                selectedId =array[i];               
                getState(selectedId);   
            });
        }else{
            $("#state").html('');
            getState(cntryId)
        }   

});

});

function getState(countryId){
     $.each(myJson.country, function (index, value) {
                    var state =value.states;

                    $.each(state, function (indexState, valueState) {
                            //alert(countryId+"=="+valueState.cid);
                            if(countryId==valueState.cid){
                                $("#state").append('<option value="'+value.indexState+'">'+valueState.name+'</option>');
                            }
                    });
    });

}

</script>

<form id="dropdowns" action="index.html">

            <label>Country:</label>
                <select id="country" name="country" multiple>
                    <option value="000">-Select Country-</option>
                </select>

            <br />

            <label>State:</label>
                <select id="state" name="network">
                    <option value="000">-Select State-</option>
                </select>

            <br />

            <label>City:</label>
                <select id="model" name="model">
                    <option value="000">-Select City-</option>
                </select>

            <br />
                <input type="hidden" id="selectedvalue" value="">
        </form>
</body>
</html>
我正在寻找一个多选框，而不是下拉列表。 - Anthony Vasquez
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接