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

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

$(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添加的。

来源

2013-03-05 ToxicSockWarrior

警报是在有用于调试的事件。 – ToxicSockWarrior 2013-03-05 00:52:42

在文档准备就绪并且'$（function（）{}）'触发之前，您确定其他选择已经在DOM中了吗？ – 2013-03-05 00:59:51

它们都是由相同的php文件生成的。所以，他们应该是。 – ToxicSockWarrior 2013-03-05 01:04:24

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

来源

2013-03-05 01:19:36 isherwood

此代码仍然存在问题。 – ToxicSockWarrior 2013-03-05 01:33:56

你试过演示了吗？精美的作品。如果您不同意，请更具体地说明什么不起作用。 – isherwood 2013-03-05 01:43:38

演示工作正常，但如果我用那个替换我的代码，行为根本没有改变。 – ToxicSockWarrior 2013-03-05 01:48:04

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

回答

相关问题