jquery – 有多个选择框打开相同的模态对话框

2019年8月4日 189次阅读

我有一个表单,允许用户将用户添加到联系人列表.我有多个选择框,允许用户选择要添加的用户,但我也希望用户能够添加不在列表中的人.因此,当选择新用户时,我想要一个模式对话框,弹出一个表单来创建用户.无论使用哪个盒子,都应显示相同的表格.因此,我给了他们所有相同的类名,我使用以下代码来检测新的用户选项.

$(function()
{
    $( ".select-user" ).change(function()
    {
        alert("List Changed");
            if ($(this).val() == 'new')
            {
                $( "#dialog-form" ).dialog( "open" );
                updateTips("* indicates a mandatory field.");
            }
    });
});

但是,只有第一个框触发此事件.第一个选择定义如下：

<select id ="select-user" class = "select-user" name="foo">

其他方框都是一样的,它们开始隐藏起来.

<select style="visibility:hidden" class="select-user" id="select-user-$index" name="bar">

通过以下代码可以看到它们：

document.getElementById('select-user-$index').style.visibility = "visible";

我已经确认.change事件除了第一个选择之外根本不会触发.关于如何触发事件,我有什么遗漏吗？

编辑：
正如我在isherwood的回答中所说,在jsfiddle中隔离选择框的代码可以提供预期的行为.所以,有关该页面的更多信息.
两个选择都是由(几乎)相同的php生成的.我在大多数情况下复制并粘贴了它,但只是添加了一行来隐藏其他框并更改了ID.

两种选择都采用相同的形式.第一个是在桌子里面,而另外一个是扔进一个桌子.

前两个后面的每个选择框都是通过javascript添加的.

最佳答案
http://jsfiddle.net/tLYDB/2/

$(function () {
    $(".select-user").each(function () {
        $(this).change(function () {
            alert("List Changed");

            if ($(this).val() == 'new') {
                $("#dialog-form").dialog("open");
                updateTips("* indicates a mandatory field.");
            }
        });
    });
});
点赞