使用php和jquery的动态元素id

好吧，这可能有点让人困惑，但现在开始。假设我在一个页面上有几个选择的下拉列表

<select id="filter" name="filter[]">
        <option value="">-- Select Filter --</option>
    </select>

    <select id="load_choice" name="load_choice[]">
        <option value="">-- Select Load_choice --</option>
    </select>

    <select id="plastic" name="plastic[]">
        <option value="">-- Select Plastic --</option>
    </select>

现在，假设我想添加另一个具有完全相同的选择选项的完全相同的表单，以便在同一页面上“创建另一个产品”（因此每个选择的名称标签上的数组）。由于表单依赖于唯一的ID，如何使这段代码中的ID成为动态的

$('#filter').change(function(){

        $('#load_choice').fadeOut();
        $('#loader').show();

        $.post("ajax/ajax_load_choice.php", {
            country: $('#country').val(),
            filter: $('#filter').val()
        }, function(response){
            setTimeout("finishAjax('load_choice', '"+escape(response)+"')", 400);
        });
        return false;
    });

---

我最终将有5组这样的选择组，用户可以创建5个产品。我该怎么做才能不必做id=“filter1”和id=“filter2”来与$（“#filter”）.change（函数…，诸如此类。基本上，我可以在jquery函数中动态设置id吗？

这就是我想到的，将每组选择框包装在一个div或其他东西中。然后删除它们的id属性

使用jQuery，您可以绑定一个更改，但仍然可以像这样获取其他两个选择

$('select[name=filter[]]').change(function() {
  var $parent = $(this).parent();

  // hide and show other selects
  $parent.find('select[name=load_choice[]]').fadeOut();
  $parent.find('select[name=plastic[]]').show();

  // make the ajax call
});

// repeat the above code for the others

---

这就是我想到的，将每组选择框包装在一个div或其他东西中，然后删除它们的id属性

使用jQuery，您可以绑定一个更改，但仍然可以像这样获取其他两个选择

$('select[name=filter[]]').change(function() {
  var $parent = $(this).parent();

  // hide and show other selects
  $parent.find('select[name=load_choice[]]').fadeOut();
  $parent.find('select[name=plastic[]]').show();

  // make the ajax call
});

// repeat the above code for the others

---

我真的不确定你在问什么。我最好的猜测是：

使用jQuery，我是否可以增加表单元素的

id

字段，以便向页面添加多个表单，并对每个表单进行唯一标识

如果这是对你的问题的合理理解，并且看看@Baylor Rae的答案（这肯定是一个有效的解释），我不一定是对的，那么以下几点应该是有效的：

jQuery html

第一个输入：


第二输入：


添加另一个表单

实际上，在单击

#formAdd

div

时，jQuery会找到

表单

，计算出表单的数量，并将其存储为变量

count

然后它克隆第一个表单（不带

.eq（0）

第一次单击克隆一个表单，第二次单击克隆两个表单，此后呈指数形式），并将其附加到同一容器中（

#formsBox

，因为缺少更好的名称）然后查找

标签

s和

输入

s；如果它们具有

id

（

输入

）或

for

（

标签

）属性，它会将以前存储的

计数

变量添加到这些属性中，唯一地标识它们

---

这是一个非常糟糕的解释，我相信有一种更漂亮的方法可以在jQuery中实现相同的最终结果，但它似乎确实有效。有一个

我真的不确定你在问什么。我的最佳猜测大致如下：

使用jQuery，我是否可以增加表单元素的

id

字段，以便向页面添加多个表单，并对每个表单进行唯一标识

如果这是对你的问题的合理理解，并且看看@Baylor Rae的答案（这肯定是一个有效的解释），我不一定是对的，那么以下几点应该是有效的：

jQuery html

第一个输入：


第二输入：


添加另一个表单

实际上，在单击

#formAdd

div

时，jQuery会找到

表单

，计算出表单的数量，并将其存储为变量

count

然后它克隆第一个表单（不带

.eq（0）

第一次单击克隆一个表单，第二次单击克隆两个表单，此后呈指数形式），并将其附加到同一容器中（

#formsBox

，因为缺少更好的名称）然后查找

标签

s和

输入

s；如果它们具有

id

（

输入

）或

for

（

标签

）属性，它会将以前存储的

计数

变量添加到这些属性中，唯一地标识它们

---

这是一个非常糟糕的解释，我相信在jQuery中有一种更漂亮的方法可以实现相同的最终结果，但它似乎确实有效。有一个建议是始终拥有唯一的ID
主要原因是，当页面中有多个具有该id的元素时，执行类似于

$（“#myId”）

的选择器可能会产生不可预测的结果

jQuery依赖于

document.getElementById（）

的本机浏览器实现，在大多数情况下，它只返回找到的第一个元素

如果您想通过使用jQuery确保您具有唯一的id，可以执行以下操作：

$('select[id=filter]').each(function(i,el){
    el.id=el.id+'-'+i;
});

如果您已经具有唯一id，则可以使用如下前缀选择器（或）：

$('select[id^=filter]');
//or
$('select[id|=filter]');

$('[id=my-id]');

您可以在中看到两者的一个实例

---

或者，如果您不关心重复id，您可以选择具有给定id的所有元素（包括重复项），如下所示：

$('select[id^=filter]');
//or
$('select[id|=filter]');

$('[id=my-id]');

---

建议始终具有唯一ID
主要原因是，当页面中有多个具有该id的元素时，执行类似于

$（“#myId”）

的选择器可能会产生不可预测的结果

jQuery依赖于

document.getElementById（）

的本机浏览器实现，在大多数情况下，它只返回找到的第一个元素

如果您想通过使用jQuery确保您具有唯一的id，可以执行以下操作：

$('select[id=filter]').each(function(i,el){
    el.id=el.id+'-'+i;
});

如果您已经具有唯一id，则可以使用如下前缀选择器（或）：

$('select[id^=filter]');
//or
$('select[id|=filter]');

$('[id=my-id]');

您可以在中看到两者的一个实例

---

或者，如果您不关心重复的ID y