Question

我有一些下拉菜单，当选择正确的值组合时，会填充另一个下拉菜单。但是，一旦填充了第三个下拉列表，我就无法更改选择，我可以选择的唯一选项是第一个。下拉列表不会更改为我选择的任何其他选项。我不确定我做错了什么。

<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

Answer 1

您的第三个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>');
    }
});

Working Example (jsFiddle)

Answer 2

因为您在{strong>任何选项更改（包括第三个）的任何时候触发事件$("select").change()，您正在重新填充第三个选择第一个选项的选项

您只需从

更改事件触发器的选择器即可

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

到

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

它将按预期工作。

这是a working jsFiddle

无法更改通过jQuery填充的选择选项

2 个答案: