多下拉框防重复功能点击新增/删除按钮失效，如何实现新增仅展示未选选项

根因说明 #

• 原有下拉选择事件仅绑定了页面初始化时已存在的下拉元素，动态新增的下拉框无法触发绑定的change事件，导致防重复逻辑失效
• 新增、删除下拉框操作完成后，没有主动刷新所有下拉框的可选选项，已被选中的值仍然会出现在新增下拉框的可选列表中
• 修复后的逻辑兼容后续接口选项新增的需求，无需修改JS逻辑，直接新增option即可生效

修复后代码 #

JavaScript部分 #

$(document).ready(function() {
  var maxField = 3; //Input fields increment limitation
  var addButton = $('.add_button'); //Add button selector
  var wrapper = $('.field_wrapper'); //Input field wrapper
  var fieldHTML = '<div>' +
    '<select name="name[]" class="select">' +
    '<option value="">Select</option>' +
    '<option value="eth0">eth0</option> ' +
    '<option value="eth1">eth1</option>' +
    '<option value="eth2">eth2</option>' +
    '<option value="eth3">eth3</option>' +
    '<option value="eth4">eth4</option>' +
    '<option value="eth5">eth5</option>' +
    '<option value="eth6">eth6</option>' +
    '</select>' +
    '<select name="name[]" class="select">' +
    '<option value="">Select</option>' +
    '<option value="eth0">eth0</option> ' +
    '<option value="eth1">eth1</option>' +
    '<option value="eth2">eth2</option>' +
    '<option value="eth3">eth3</option>' +
    '<option value="eth4">eth4</option>' +
    '<option value="eth5">eth5</option>' +
    '<option value="eth6">eth6</option>' +
    '</select><a href="javascript:void(0);" class="remove_button">Delete</a></div>'; //New input field html 

  var x = 1; //Initial field counter is 1

  // 抽离公共的选项刷新方法
  function refreshOptions() {
    var myOpt = [];
    $("select").each(function() {
      myOpt.push($(this).val());
    });
    $("select").each(function() {
      $(this).find("option").prop('hidden', false);
      var sel = $(this);
      $.each(myOpt, function(key, value) {
        if ((value != "") && (value != sel.val())) {
          sel.find("option").filter('[value="' + value + '"]').prop('hidden', true);
        }
      });
    });
  }

  // 事件委托绑定下拉选择事件，所有动态新增的select都会触发
  $(document).on('change', 'select', refreshOptions);

  //Once add button is clicked
  $(addButton).click(function() {
    //Check maximum number of input fields
    if (x < maxField) {
      x++; //Increment field counter
      $(wrapper).append(fieldHTML); //Add field html
      refreshOptions(); // 新增后刷新可选选项
    }
  });

  //Once remove button is clicked
  $(wrapper).on('click', '.remove_button', function(e) {
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
    refreshOptions(); // 删除后刷新可选选项
  });

  // 页面初始化先刷新一次选项
  refreshOptions();
});

HTML部分和原有代码一致，无需修改 #

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="container" style="  padding:30px;">
  <form method="post" action="dashboard.php">
    <div class="row">
      <div class="col-sm-6">
        <div class="form-group">
          <label for="email"> Interface</label>
          <select name="name[]" class="select">
            <option value="">Select</option>
            <option value="eth0">eth0</option>
            <option value="eth1">eth1</option>
            <option value="eth2">eth2</option>
            <option value="eth3">eth3</option>
            <option value="eth4">eth4</option>
            <option value="eth5">eth5</option>
            <option value="eth6">eth6</option>
          </select>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-3">
        <hr>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <div class="field_wrapper">
          <div>
            <select name="name[]" class="select">
              <option value="">Select Pair</option>
              <option value="eth0">eth0</option>
              <option value="eth1">eth1</option>
              <option value="eth2">eth2</option>
              <option value="eth3">eth3</option>
              <option value="eth4">eth4</option>
              <option value="eth5">eth5</option>
              <option value="eth6">eth6</option>
            </select>
            <select name="name[]" class="select">
              <option value="">Select Pair</option>
              <option value="eth0">eth0</option>
              <option value="eth1">eth1</option>
              <option value="eth2">eth2</option>
              <option value="eth3">eth3</option>
              <option value="eth4">eth4</option>
              <option value="eth5">eth5</option>
              <option value="eth6">eth6</option>
            </select><br>
            <select name="name[]" class="select">
              <option value="">Select Pair</option>
              <option value="eth0">eth0</option>
              <option value="eth1">eth1</option>
              <option value="eth2">eth2</option>
              <option value="eth3">eth3</option>
              <option value="eth4">eth4</option>
              <option value="eth5">eth5</option>
              <option value="eth6">eth6</option>
            </select>
            <select name="name[]" class="select">
              <option value="">Select Pair</option>
              <option value="eth0">eth0</option>
              <option value="eth1">eth1</option>
              <option value="eth2">eth2</option>
              <option value="eth3">eth3</option>
              <option value="eth4">eth4</option>
              <option value="eth5">eth5</option>
              <option value="eth6">eth6</option>
            </select>
            <a href="javascript:void(0);" class="add_button" title="Add field">Add</a>
          </div>
        </div>
      </div>
      <div class="col-sm-3"></div>
      <div class="col-sm-3"></div>
    </div>
  </form>
</div>

内容的提问来源于stack exchange，提问作者saurabh