Question

我有一个下拉/选择菜单，根据用户选择的内容显示和隐藏各种div。在每个div中都有另一个下拉/选择菜单，我想在触发更改操作时使用。

由于这个div动态地给出了ID，我很难弄清楚如何选择所需的下拉/选择菜单。

这是jQuery代码：

$(document).ready(function(){

    $("#category").change(function(){
        var category = $("#category").val();
        var box = $('#'+ category);
        $('.class-name').hide();
        box.show();
    }) ;

    var category = $("#category").val();
    var selector = 'selector_'+category;

    $("#"+selector).change(function(){
        alert('Do something');
    });
});

一些简化的HTML：

<select id='category'>
    <option value='0'>1</option>
    <option value='1'>2</option>
    <option value='2'>3</option>
</select>

<div class='box class-name' id='1'>
    <select id='selector_1'>
        <option value='1'>One</option>
        <option value='2'>Two</option>
    </select>
</div>
<div class='box class-name' id='2'>
    <select id='selector_2'>
        <option value='1'>One</option>
        <option value='2'>Two</option>
    </select>
</div>
<div class='box class-name' id='3'>
    <select id='selector_3'>
        <option value='1'>One</option>
        <option value='2'>Two</option>
    </select>
</div>

div会根据需要显示和隐藏，但我不能为我的生活获得警报（＆＃39;做某事＆＃39;）;触发我认为是我试图选择下拉/选择菜单的问题。

所有人都非常感谢！

干杯，DB。

Answer 1

您需要链接更改。你的方式，代码一次运行，意思是：

准备好文件时，请执行：
在#category元素中设置onChange
查找类别当前值（现在，没有选择，因此值未定义）
将选择器设置为＆＃34;选择器_＆＃34; + undefined
使用id选择器查找元素，因为没有具有此id的元素，因此未定义任何更改。

试试这个，而不是：

$(document).ready(function() {
    var categoryField = $("#category");
    categoryField.change(function() {
        var category = categoryField.val();
        var box = $('#'+ category);
        $('.class-name').hide();
        box.show();

        var selector = 'selector_'+category;

        $("#"+selector).change(function() {
            alert('Do something');
        });
    });
});

Answer 2

var category = $("#category").val();

加载页面时类别为空。

简单的解决方案：

$(".box select").change(function(){
    alert('Do something');
});

Answer 3

我查了一下，它正在工作

$("#category").change(function(){    
    var category = $("#category").val();
    var box = $('#'+ category);        
    $('.class-name').hide();
    box.show();
    var s = $(box).find('select');        
    $(s).bind("change", function() { 
       alert("Do something"); 
    })
})

Answer 4

在每个div中，我会有另一个下拉/选择菜单也喜欢触发变革行动。

当div包含的下拉列表发生变化时，您似乎正在寻找触发事件

如果是这样，你可以使用jquery外卡选择器

在您的情况下，所有select元素都具有相同的前缀ID。

所以$（“[id ^ = selector_]”）将响应任何具有前缀

字符串的选择框

 $("[id^=selector_").change(function(event){
      $("#demoUp").text($(this).context.value);
    });

检查JSFIDDLE。占位符将按选择选项

的值更新

Answer 5

要指出您已更改文档页面上的id，请使用下面的

$(document).on("change",$("#"+selector),function(){
        alert('Do something');
});

Answer 6

试试这个：

$(document).ready(function(){

    $("#category").change(function(){
        var category = $(this).val();
        $('.class-name').hide();
        $('#'+ category).show();

        $("#selector_"+category).change(function(){
            alert('Do something');
        });
    }) ;

});

使用变量作为JQuery选择器

6 个答案: