Question

我有一个包含大量文本字段和下拉列表的html表单。我需要遍历所有下拉列表然后进行一些验证。在该页面中，只有第一个下拉列表在页面加载时可见。基于单击某些单选按钮显示剩余的下拉列表。我编写了一个jquery函数来迭代这些下拉列表。但现在它只是通过第一次下拉列表进行迭代。它没有进入第二个。

HTML ：

<div class="input-container class_dd"> 
    <select class="class2" id="dd1" name="dd11">
         <option value="">Month</option>
         <option value="1">Jan</option>
    </select>
</div>
<div class="input-container class_dd"> 
    <select class="class2" id="dd2" name="dd22">
         <option value="">year</option>
         <option value="1900">1900</option>
    </select>
</div>

Jquery的：

$('#form1 .class_dd').filter(":visible").each(function() {
    alert("1");   
        $(this).find('a:visible + select').change(function () {
             alert("2");
             //doing some validations
        });
});

现在仅显示第一个下拉列表，显示alert(2)。当我更改第二个下拉列表的值时，alert(2)未被触发，因此我无法验证该下拉列表。谁能帮助我理解我在这里做错了什么？

Answer 1

一次注册所有选择元素的更改处理程序....如果选择不可见则不会被触发

$('#form1 .class_dd select').change(function () {
    alert("2");
});

Answer 2

试试这个......

$(".class2").on("change",function(){

   console.log($(this).val()); 

});

Answer 3

您可以使用 .on()

$('#form1 .class_dd select').on('change',function(){
   // code
});

change()只是bind("change")的缩写。

Answer 4

请尝试以下代码：

$(".class2").on("change",function(){

     alert( $(this).attr('id') );

});

Answer 5

尝试改变这一点：

$(this).find('a:visible + select')

到此：

$(document).on('change', 'a:visible + select', function () {
     alert("2");
     //doing some validations
});

Answer 6

试试这段代码：

   <form id="myfrm">
    <div class="input-container class_dd"> 
        <select class="class2" id="dd1" name="dd11">
             <option value="">Month</option>
             <option value="1">Jan</option>
        </select>
    </div>
    <div class="input-container class_dd"> 
        <select class="class2" id="dd2" name="dd22">
             <option value="">year</option>
             <option value="1900">1900</option>
        </select>
    </div>


$('#myfrm select').each(function(i,obj) {         
        $(this).change(function () {
             console.log(this);
             //doing some validations
        });
});

下拉列表中的更改事件无效

6 个答案: