Заполнение меню из массива JS без дубликатов с помощью JQuery - PullRequest
Новая
       17

Заполнение меню из массива JS без дубликатов с помощью JQuery

1 голос
/ 12 октября 2011

У меня проблема, и я не смог ее преодолеть около двух дней.
У меня есть строка с разделителями, и я хочу заполнить меню с помощью JQuery.
Мой массив похож на это; 

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


и я хочу использовать эту структуру меню с помощью функции JQuery append (или любым другим предложенным способом)
Я имею в виду, когда пользователь наводит курсор на мое меню, вызываетПоявится меню, и будут показаны все страны, и у каждого из них есть свои элементы подменю (Города).
Я хотел бы указать, сколько стран существует, и у каждого Contry есть сколько городов неизвестно.
Iиспользовала функцию unique для удаления дублированных стран, но я не могу помещать города в страны.
Спасибо, прямо сейчас ..

Ответы [ 2 ]

2 голосов
/ 12 октября 2011

См. Этот рабочий пример: 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 голосов
/ 12 октября 2011

ваш массив должен быть многомерным массивом, подобным этому: 

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>
...