Question

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

$(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添加前两个之后的每个选择框。

Answer 1

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.");
            }
        });
    });
});

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

1 个答案: