Question

我有一个问题，我无法战胜两天我有一个分隔的字符串，我想通过JQuery填充菜单我的阵列是这样的;

Country1,City1|Country1,City2|Country2,City1|Country3,City1|Country3,City2|Country3,City3

我希望通过使用JQuery append功能（或任何其他建议的方式）来使用this菜单结构我的意思是，当用户将鼠标悬停在我的菜单上时，会弹出一个菜单，显示所有国家/地区，每个国家/地区都有自己的子菜单元素（城市）。
我想指出的是，有多少国家存在，而每个国家都有多少城市是未知的我使用unique函数来消除重复的国家，但我不打算将城市纳入国家。
谢谢你......

Answer 1

请参阅此工作示例：http://jsfiddle.net/nrabinowitz/FDWgF/

您首先需要使用国家/地区名称作为键来收集对象中每个国家/地区的城市，然后遍历该对象以创建列表：

var data = "Country1,City1|Country1,City2|Country2,City1|Country3,City1|Country3,City2|Country3,City3";

// split into country/city pairs
data = data.split('|');

var countries = {},
    pair, country, city;

for (var x=0; x<data.length; x++) {
    // get pair as an array
    pair = data[x].split(',');
    country = pair[0];
    city = pair[1];
    // make sure the country is in our object
    if (!(country in countries)) {
        countries[country] = []
    }
    // add the city to the list for that country
    countries[country].push(city);
}

// now get the values out of the object
$.each(countries, function(country, cities) {
    var $country = $('<li>' + country + '<ul></ul></li>');
    // append each city to sub-list
    $.each(cities, function(i, city) {
        $('ul', $country)
            .append('<li>' + city + '</li>')
    });
    // now append the whole thing to the country list
    $('#countries').append($country);
});

Answer 2

你的数组应该是这样的多维数组：

var countries = {
"country1":["city1", "city2"],
"country2":["city1"],
"counrty3":["city2", "city2"]
};

然后您将不会有重复的国家/地区，然后您应该使用for in遍历数组并以此方式填充菜单

var options = "";
foreach(countries as country)
{
    foreach(country as city)
    {
        options += "<option value=" + city+ ">"+ city+ "</options>";
    }
}
$("#cities").html(options)
<select id="cities">
</select>

从JS数组填充菜单，没有重复的JQuery

2 个答案: