jquery - 从 JS array 中填充菜单而不被JQuery复制

  显示原文与译文双语对照的内容
0 0

我有一个问题,我不能应付两天。
我有一个带分隔符的字符串,我想通过JQuery来填充菜单。
我的array 像这样

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


使用 JQuery append 函数( 或者其他建议的方式),我想使用这个弹出式菜单结构。
当用户悬停在菜单触发器上时,会弹出一个菜单,并且每个国家都会显示( 城市) 菜单元素。
我想指出,有多少个国家存在,每个Contry有多少个城市。
我将 unique 函数用于eleminate复制国家,但是并没有将城市放入国家。
现在谢谢你。

时间: 原作者:

0 0

请参阅这里工作示例: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);
});

原作者:
0 0

你的array 应该是一个像这样的多维 array:


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

然后,你将不会有重复的国家,然后你应该通过 array 循环,并填充菜单的方式。


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

原作者:
...