javascript - 使用jquery控制附加和重复元素？

Question

我有一个 html 元素(“trip”)，它有两个依赖的选择。 Jquery 用于根据为第一个选择字段 (choice1) 选择的值来确定第二个选择字段 (choice2) 的选择值。

同时，我还使用jquery通过append函数将“trip”复制为重复元素。因为所有元素都具有相同的 id，所以所有重复“行程”的选择值都是相同的。 1)我们如何为每个附加元素分配唯一的id(例如trip1，trip2)2)如何让jquery进行独立调用以在“trip”元素中获得不同的结果？ (例如 $("trip1"), $("trip2")

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++;
});

这用于根据第一个选择的选择来确定第二个选择的选择选项。

$("#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。