Невозможно изменить параметры выбора, заполненные через jQuery

У меня есть несколько раскрывающихся меню, в которых при выборе правильной комбинации значений заполняется другое раскрывающееся меню. Однако после заполнения третьего раскрывающегося списка я не могу изменить выбор, и единственный вариант, который я могу выбрать, — это первый. Выпадающий список не меняется ни на какие другие параметры, которые я выбираю. Я не уверен, что я делаю неправильно.

<select id="firstSelection">
    <option value='1'>One</option>
    <option value='2'>Two</option>
</select>
<select id="secondSelection">
    <option value='1'>One</option>
    <option value='2'>Two</option>
</select>
<select id="thirdSelection"></select>


$('select').on('change', function () {
    var firstValue = $('#firstSelection').val();
    var secondValue = $('#secondSelection').val();

    if(firstValue == 1 && secondValue == 2){
        $('#thirdSelection').html('<option>You</option>' +
                                  '<option>Have</option>' +
                                  '<option>Selected</option>' +
                                  '<option>The</option>' +
                                  '<option>Right</option>' +
                                  '<option>Options</option>');
    }
});

jsfiddle


jquery select option
person Community    schedule 12.03.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Ваш третий список select не сохраняет выбранное значение, поскольку он повторно заполняется при изменении любого списка выбора (включая третий).

Я предлагаю присвоить первым двум спискам класс и отвечать только на списки с этим классом:

<select id="firstSelection" class="update">
    <option value='1'>One</option>
    <option value='2'>Two</option>
</select>
<select id="secondSelection" class="update">
    <option value='1'>One</option>
    <option value='2'>Two</option>
</select>
<select id="thirdSelection"></select>

$('select.update').on('change', function () {
    var firstValue = $('#firstSelection').val();
    var secondValue = $('#secondSelection').val();

    if (firstValue == 1 && secondValue == 2) {
        $('#thirdSelection').html('<option>You</option>' +
            '<option>Have</option>' +
            '<option>Selected</option>' +
            '<option>The</option>' +
            '<option>Right</option>' +
            '<option>Options</option>');
    }
});

Рабочий пример (jsFiddle)

person showdev    schedule 12.03.2014

arrow_upward
0
arrow_downward

Поскольку вы запускаете событие $("select").change() каждый раз, когда любое изменение выбора (включая третий), вы повторно заполняете третье, что заставляет выбрать первый вариант.

Все, что вам нужно сделать, это изменить селектор триггера события с

$('select').on('change', function () {

to 

$('#firstSelection, #secondSelection').on('change', function () {

и он будет работать как задумано.

Вот работающий jsFiddle

person Ken Herbert    schedule 12.03.2014