Не може да се промени избраните опции, попълнени чрез 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

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

Всичко, което трябва да направите, е да промените селектора за задействане на вашето събитие от

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

to 

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

и ще работи по предназначение.

Ето работещ jsFiddle

person Ken Herbert    schedule 12.03.2014