通过 JQuery 从 JS 数组填充菜单而不重复

Question

我有一个问题，大约两天无法克服。
我有一个分隔字符串，我想通过 JQuery 填充菜单。
我的数组是这样的；

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

我想使用这个菜单结构通过使用 JQuery append 函数（或任何其他建议的方式）
我的意思是，当用户将鼠标悬停在我的菜单上时，会触发一个菜单，并且将显示所有国家/地区，并且每个国家/地区都有自己的子菜单元素（城市）。
我想指出的是，存在多少个国家，每个国家有多少个城市都是未知的。
我使用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>