Question

在这里好好忍受，我可能正在尝试打造不可能的事物或以错误的方式进行尝试。

我有2个选择输入number1，number2，它们是从html()上的ready()动态传播的。 number1加载时已经具有选项，而number2尚未加载选项。

然后我首先触发$('#number1').val(1).change();更改事件，以便它更改number1选择的值并触发更改事件。

然后直接在要更改number2的值之后，从已加载的新动态选项中使用$('#number2').val(2).change();选择。

正在为number2选择加载选项，但是$('#number2').val(2).change();并未更改它们。我很确定这与DOM有关，要么尚未加载新的动态选项，要么第二个change事件未触发。

$(document).ready( function() {
    $('#container').html('<select class="number1"><option value="0">Choose</option><option value="1">Number 1</option><option value="2">Number 2</option></select><select id="number2"></select>')

    $('.number1').val(1).change();
    $('.number2').val(2).change();

    $(document).on('change', '.number1', function() {
        // ajax call here that echos back the options for number2 select
        $.ajax({
            type: 'post',
            url: 'blah/blah.php',
            data: {record: record},
            success: function (data) {
                $('.number2').html(data);
                // data echo's back <option value="1">1</option><option value="2">2</option>
            }
        })
    })
    $(document).on('change', '.number2', function() {
        console.log('number2 change fired off!')
    })
})

<div id="container"></div>

Answer 1

您需要将该语句放入加载选项的回调中。否则，您将在将带有value="2"的选项加载到DOM中之前执行它，因此它无效。

$(document).on('change', '.number1', function() {
    // ajax call here that echos back the options for number2 select
    $.ajax({
        type: 'post',
        url: 'blah/blah.php',
        data: {record: record},
        success: function (data) {
            $('#number2').html(data);
            $('#number2').val(2).change();
        }
    })
})

此外，此行不执行任何操作：

$('#number1').val(1).change();

第一个菜单包含class="number1"，而不是id="number1"。

这没有任何作用：

$(document).on('change', '.number2', function() {
    console.log('number2 change fired off!')
})

因为第二个菜单包含id="number2"，但没有class="number2"。

您需要确保HTML和JS之间使用的类和ID一致。对于可能多次出现且应被相似对待的事物，请使用类；对于唯一的事物，请使用ID。

在触发上一个更改事件并将动态选项加载到该选择框之后，如何更改选择框的值

1 个答案: