Question

我有一个html元素（＆＃34; trip＆＃34;），它有两个依赖选择。 Jquery用于确定第二个选择字段（choice2）的选择值，具体取决于为第一个选择字段（choice1）选择的值。

与此同时，我也在使用jquery复制＆＃34; trip＆＃34;作为通过追加函数的重复元素。因为所有元素都具有相同的id，所以重复＆＃34; trip＆＃34;的选择值是相同的。 1）我们如何为每个附加元素分配唯一ID（例如trip1，trip2）2）如何使jquery进行独立调用以获得不同的结果＆＃34; trip＆＃34;元件？（例如$（＆＃34; trip1＆＃34;），$（＆＃34; trip2＆＃34;）

HTML：

<form>
   <div id="trip">
       <select id="choice1" value="Z">
           <option>Option 1</option>
           <option>Option 2</option>
       </select>
       <select id="choice2">
            ...dependent on result of first select...
       </select>
   </div>
 </form>

jQuery的：

我使用以下代码将相同的html元素附加到页面：

var maxAppend = 0;
$("#add").click(function() {
   if (maxAppend >= 4) return;

   var additional = $('#trip').html();
   $("#nexttrip").append(additional);
   maxAppend++;
});

这用于根据为frist select选择的内容确定第二个选择的选择选项。

$("#choice1").change(function() {
    if($(this).val() == 'Z') {
      $("select#choice2").html("<option>Select a value</option>");
      $("select#choice2").attr('disabled', true);
    }
   else {
     ...determine values for choice2...
   }

Answer 1

正如其他人所说，创建动态ID可能会变得很麻烦。而是将类分配给select元素。

<div class="trip">
    <select class="choice1" value="Z">
        <option>Option 1</option>
        <option>Z</option>
    </select>
    <select class="choice2" value="Z">
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
</div>

这将允许您遍历元素而不会发生ID冲突。

现在，当您复制元素时，您将能够使用.index()确定元素索引。

$("form").on("change", "select", function(){
    var selInd = $(".choice1").index(this);
    if($(this).val() == "Z"){
        $(".choice2").eq(selInd).html("<option>Select a value</option>");
        $(".choice2").eq(selInd).attr('disabled', true);
    }
});

无需向ID或类附加数字。您只需按索引对select元素进行配对。由于它们是并排的，因此它们将根据其类别具有相同的索引。因此，第一个使用choice1，第二个使用choice2。

Answer 2

从你的说法来看，你觉得每次出行都有特殊意义吗？如果是这样，我不会动态创建元素，而是预先创建隐藏的所有行程，然后根据您的逻辑显示它们。如果您对每次旅行没有特殊待遇，那么这里的其他作家都是对的，请使用class而不是id。

关于动态ID，您可以这样做：

var maxAppend = 0;
$("#add").click(function() {
   if (maxAppend >= 4) return;

   var additional = $($('#trip').html());
   additional.attr('id', 'trip' + $('[id^=trip]').length)
   $("#nexttrip").append(additional);
   maxAppend++;
});

Jquery使用jquery控制追加和重复元素？

2 个答案: