javascript - 具有相同类的多个下拉列表+依赖选择的插件

Question

所以我需要创建一个用户可以添加或删除下拉列表（任务类型）+依赖选择的下拉列表（任务名称）的表单。

现在的问题是，当用户添加更多行时。然后用户选择类型，所有的任务名称将跟随。这是由于使用了相同的类名。那么我应该怎么做才能确保当用户更改类型时，只有依赖选择的下拉菜单会受到影响？ . 代码如片段所示。谢谢

var task_list = [{
    "id": 1,
    "name": "Duckbill Leak Tester",
    "type": "tester",
  },
  {
    "id": 2,
    "name": "Main PCBA Pairing",
    "type": "upair",
  },
  {
    "id": 3,
    "name": "Battery Kitting",
    "type": "kit",

  },
  {
    "id": 4,
    "name": "PRUPMU Leak Tester",
    "type": "tester",

  },
  {
    "code": "flask",
    "name": "Flask Leak Tester",
    "type": "tester",

  },
  {
    "id": 6,
    "name": "Functional Tester",
    "type": "tester",

  },
  {
    "id": 7,
    "name": "Calibration Test",
    "type": "tester",

  },
  {
    "id": 8,
    "name": "Duckbill Kitting",
    "type": "kit",

  },
  {
    "id": 9,
    "name": "Serial No",
    "type": "sn",

  },
  {
    "id": 10,
    "name": "Master Carton",
    "type": "pack",

  },
  {
    "id": 11,
    "name": "Pallet",
    "type": "pallet",

  },
  {
    "id": 12,
    "name": "Straw Kitting",
    "type": "kit",
  },
  {
    "id": 13,
    "name": "Flask Kitting",
    "type": "kit",

  },
  {
    "id": 14,
    "name": "Puncture Tip Kitting",
    "type": "kit",

  },
  {
    "id": 15,
    "name": "Antenna Kitting",
    "type": "kit",

  },
  {
    "id": 16,
    "name": "Load Cell Long Kitting",
    "type": "kit",

  },
  {
    "id": 17,
    "name": "Load Cell Short Kitting",
    "type": "kit",

  },
  {
    "id": 18,
    "name": "PRUPMU Pairing",
    "type": "join",
  },
  {
    "id": 19,
    "name": "Workorder",
    "type": "wo",
  },

  {
    "id": 20,
    "name": "Dummy Tester",
    "type": "tester",

  }
]

$(document).ready(function() {
  $(".s-task").chosen({
    width: "100%"
  });

  $("body").on("change", ".s-type", function() {
    var chosen_type = $("option:selected", this).val();
    taskListDropDown(chosen_type);
  });

  $("#add-row").click(() => {
    addNewRow();
  });
})

function addNewRow() {
  var html = `<div class="form-group col-md-4 type-row">
  <select class="form-control s-type" name="task-type">
  <option  >Please choose one of the task type</option>
  <option value="tester">Tester</option>
  <option value="kit">Kitting</option>
  <option value="upair">Unit Pairing</option>
  <option value="repair">Repair</option>
  <option value="sn">Serial Number</option>
  <option value="join">Join</option>
  <option value="pack">Packaging</option>
  <option value="pallet">Palletizing</option>
  </select>
</div>
<div class="form-group col-md-7 task-row">
  <select
    class="chosen-container-multi chosen-choices s-task task"
    name="task-name"
    multiple
  ></select>
</div>
<div class="form-group col-md text-center action-row">
  <button type="button" class="form-control btn btn-info ">
    <i class="fas fa-plus"></i>
  </button>
</div>`;
  $(".add-row").append(html);
  $(".s-task").chosen({
    width: "100%"
  });

}

function taskListDropDown(type) {
  $(".task").empty();
  $.each(task_list, (key, val) => {
    if (val.type == type) {
      $(".task").append(
        $("<option>", {
          value: val.id,
          text: val.name,
        })
      );
    }
  });
  $(".task").trigger("chosen:updated");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

<div class="add-row form-row col-12">
  <div class="form-group col-md-4 type-row">
    <label>Task type</label>
    <select class="form-control s-type" name="task-type">
      <option>Please choose one of the task type</option>
      <option value="tester">Tester</option>
      <option value="kit">Kitting</option>
      <option value="upair">Unit Pairing</option>
      <option value="repair">Repair</option>
      <option value="sn">Serial Number</option>
      <option value="join">Join</option>
      <option value="pack">Packaging</option>
      <option value="pallet">Palletizing</option>
    </select>
  </div>
  <div class="form-group col-md-7 task-row">
    <label>Task Name</label>
    <select class="chosen-container-multi chosen-choices s-task task" name="task-name" multiple></select>
  </div>
  <div class="form-group col-md text-center action-row">
    <label> Action</label>
    <button type="button" class="form-control btn btn-info" id="add-row">Add
                  <i class="fas fa-plus"></i>
                </button>
  </div>
</div>

标签： javascripthtmljquerydropdownjquery-chosen