Question

我在Jquery中创建了两个下拉列表。当某个事件发生时，第一个下拉列表中的选项将填充到函数中。

然后根据第一个下拉列表中的选择，应使用第二个函数填充第二个下拉列表，该函数基本上检测第一个下拉列表中的更改。但是，第二个功能没有检测到任何变化，我无法找出原因。我提供这两个功能 -

这是第一个功能 -

$(document).on("click", ":submit", function(e){
    e.preventDefault();
    var y = $(this).attr('id');

    if(y.substring(0,6)==='CTopic'){
        var x = $(this).attr('id').substring(6);
        $('#CTopic'+x).hide();
        $('#AnsTopic'+x).append('<option value="All">All</option');
        $('#AnsTopic'+x).append('<option value="Kinematics">Kinematics</option>');
        $('#AnsTopic'+x).append('<option value="Mechanics">Mechanics</option>');
        $('#AnsSubTopic'+x).append('<option value="All">All</option');
        $('#AnsTopic'+x).show();
        $('#AnsSubTopic'+x).show();
    }
});

这是第二个功能 -

$( document ).ready(function() {
    $("[id^='AnsTopic']").change(function() {
        var x = $(this).attr('id').substring(8);

        $('#AnsSubTopic'+x).html('');
        switch($(this).val()) {
            case 'All':
                $('#AnsSubTopic'+x).append('<option value="All">All</option>');
            break;
            case 'Kinematics':
                $('#AnsSubTopic'+x).append('<option value="All">All</option>');
                $('#AnsSubTopic'+x).append('<option value="Vectors">Vectors</option>');
                $('#AnsSubTopic'+x).append('<option value="Motion">Motion</option>');
                $('#AnsSubTopic'+x).append('<option value="Projectile">Projectile</option>');
            break;
            case 'Mechanics':
                $('#AnsSubTopic'+x).append('<option value="All">All</option>');
                $('#AnsSubTopic'+x).append('<option value="Newton Law">Newton Law</option>');
                $('#AnsSubTopic'+x).append('<option value="Friction">Friction</option>');
                $('#AnsSubTopic'+x).append('<option value="Circular Motion">Circular Motion</option>');
                $('#AnsSubTopic'+x).append('<option value="Work-Energy">Work-Energy</option>');
                $('#AnsSubTopic'+x).append('<option value="Momentum-Collision">Momentum-Collision</option>');
                $('#AnsSubTopic'+x).append('<option value="Rotational Dynamics">Rotational Dynamics</option>');
                $('#AnsSubTopic'+x).append('<option value="Gravitation">Gravitation</option>');
            break;
        }
    });
});

只是为了澄清AnsTopic是第一个列表而AnsSubTopic是第二个列表。任何关于未检测到更改的建议

Answer 1

尝试添加防止默认操作并将更改功能放在body元素

上

$( document ).ready(function() {
    $("body").on("change", "[id^='AnsTopic']", function(e) {
        e.preventDefault();
var x = $(this).attr('id').substring(8);

        $('#AnsSubTopic'+x).html('');
        switch($(this).val()) {
            case 'All':
                $('#AnsSubTopic'+x).append('<option value="All">All</option>');
            break;
            case 'Kinematics':
                $('#AnsSubTopic'+x).append('<option value="All">All</option>');
                $('#AnsSubTopic'+x).append('<option value="Vectors">Vectors</option>');
                $('#AnsSubTopic'+x).append('<option value="Motion">Motion</option>');
                $('#AnsSubTopic'+x).append('<option value="Projectile">Projectile</option>');
            break;
            case 'Mechanics':
                $('#AnsSubTopic'+x).append('<option value="All">All</option>');
                $('#AnsSubTopic'+x).append('<option value="Newton Law">Newton Law</option>');
                $('#AnsSubTopic'+x).append('<option value="Friction">Friction</option>');
                $('#AnsSubTopic'+x).append('<option value="Circular Motion">Circular Motion</option>');
                $('#AnsSubTopic'+x).append('<option value="Work-Energy">Work-Energy</option>');
                $('#AnsSubTopic'+x).append('<option value="Momentum-Collision">Momentum-Collision</option>');
                $('#AnsSubTopic'+x).append('<option value="Rotational Dynamics">Rotational Dynamics</option>');
                $('#AnsSubTopic'+x).append('<option value="Gravitation">Gravitation</option>');
            break;
        }
    });
});

使用Jquery检测下拉列表中的更改

1 个答案: