3 выпадающего списка Заполнить на основе выбора в другом [Каскадное выпадающее меню]

Я новичок в Java-скрипте. Здесь у меня есть рабочий пример для 2 выпадающих Fiddle .

HTML:

<select id=a></select>
<select id=b></select>
<select id=c></select>

JavaScript:

var data = [ // The data
    ['ten', [
        'eleven','twelve'
    ]],
    ['twenty', [
        'twentyone', 'twentytwo'
    ]]
];

$a = $('#a'); // The dropdowns
$b = $('#b');

for(var i = 0; i < data.length; i++) {
    var first = data[i][0];
    $a.append($("<option>"). // Add options
       attr("value",first).
       data("sel", i).
       text(first));
}

$a.change(function() {
    var index = $(this).children('option:selected').data('sel');
    var second = data[index][2]; // The second-choice data

    $b.html(''); // Clear existing options in second dropdown

    for(var j = 0; j < second.length; j++) {
        $b.append($("<option>"). // Add options
           attr("value",second[j]).
           data("sel", j).
           text(second[j]));
    }
}).change(); // Trigger once to add options at load of first choice

Дайте мне знать, как добавить еще один раскрывающийся список в этот код.

Спасибо


drop-down-menu jquery populate
person Raka    schedule 23.05.2013    source источник
comment
Raka Можете ли вы объяснить свою проблему немного больше?   -  person vinothini    schedule 23.05.2013
comment
Привет, в настоящее время я использую приведенный выше код для раскрывающегося списка страны и штата. раскрывающийся список состояния будет обновляться в зависимости от выбора страны. теперь мне нужно добавить поле города для обновления на основе выбора штата.   -  person Raka    schedule 23.05.2013

Ответы (1)


arrow_upward
2
arrow_downward

Попробуйте что-то вроде этого. Мне пришлось немного изменить структуру объекта data. Далее, чтобы получить значение раскрывающегося списка, вы можете просто сделать .val()

var data = {
    'ten': {
        'eleven': [11, 1111, 111111],
        'twelve': [12, 1212, 121212]
    },
    'twenty': {
        'twentyone': [21, 2121, 212121],
        'twentytwo': [22, 2222, 222222]
    }
},
$a = $('#a'); // The dropdowns
$b = $('#b');
$c = $('#c');

for (var prop in data) {
    var first = prop;
    $a.append($("<option>"). // Add options
    attr("value", first).
    text(first));
}

$a.change(function () {
    var firstkey = $(this).val();
    $b.html(''); // Clear existing options in second dropdown
    for (var prop in data[firstkey]) {
        var second = prop;
        $b.append($("<option>"). // Add options
        attr("value", second).
        text(second));
    }
    $b.change();
}).change(); // Trigger once to add options at load of first choice

$b.change(function () {
    var firstKey = $a.val(),
        secondKey = $(this).val();
    $c.html(''); // Clear existing options in second dropdown
    for(var i = 0; i < data[firstKey][secondKey].length; i++) {
        var third = data[firstKey][secondKey][i]
        $c.append($("<option>"). // Add options
        attr("value", third).
        text(third));
    }
    $c.change();
}).change();

Проверить Fiddle

person Sushanth --    schedule 23.05.2013
comment
Работает именно то, что я ожидал. Спасибо - person Raka; 23.05.2013
comment
@Raka .. Рад, что помог :) - person Sushanth --; 23.05.2013