动态附加选项和已选中的已禁用

Question

我有动态添加的选项，我想禁用以前选择的选项。这是我的代码。

<select class="form-control select2i " name="i_name[]" required="">             
    <option value="">Select Investor</option>
    <option value="1">Self Capital</option>              
    <option value="11">Mr. ABC</option>
</select>

这是我的JS代码。

$(document).on('click','.add_more_items', function() { 

    //click on add_more_items button a new select list is append
    var arr_selected = $('select.select2i').map(function() {

        return this.value
    }).get();

    $(".select2i option").each(function() {
        var arr_new = $(this).val();

        for (var i=0; i<arr_new.length; i++) {

            for (var j=0; j<arr_selected.length; j++) {

                if (arr_new[i] == arr_selected[2]) {
                    var option = $("option[value='" + arr_new[i] + "']", this);
                    option.attr("disabled","disabled");
                }
            }
        }
    });
});

截图： enter image description here

Answer 1

SELECT2组件为您做到了这一点。 多选框显示可用选项 - 任何选定的选项都将变暗，如example所示：

Answer 2

我希望以下代码能为您提供帮助，

<table id="products" border="0">
  <tr>
    <td>
      <select class="form-control select2i " name="i_name[]" required="">             
    <option value="">Select Investor</option>
    <option value="1">Self Capital</option>              
    <option value="11">Mr. ABC</option>
</select>
    </td>
    <td><input type="text" value="" />
    </td>
    <td><button id="" class="add_more_items">Add</button>
    </td>
  </tr>
</table>
$(document).on('click', '.add_more_items', function() { //click on add_more_items button a new select list is append

  var prevRow = $('#products').closest('#products').find("tr:last-child");

  var cloned = prevRow.clone();
  cloned.insertAfter(prevRow);
  cloned.find('select option').each(function(index, option) {
    var prevRows = cloned.siblings().each(function(i, tr) {
      option.value !== $('select', tr).val() || $(option).prop('disabled', true);
    });
  });


});

$(document).on('click', '.add_more_items', function() { //click on add_more_items button a new select list is append

  var prevRow = $('#products').closest('#products').find("tr:last-child");

  var cloned = prevRow.clone();
  cloned.insertAfter(prevRow);
  cloned.find('select option').each(function(index, option) {
    var prevRows = cloned.siblings().each(function(i, tr) {
      option.value !== $('select', tr).val() || $(option).prop('disabled', true);
    });
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="products" border="0">
  <tr>
    <td>
      <select class="form-control select2i " name="i_name[]" required="">             
    <option value="">Select Investor</option>
    <option value="1">Self Capital</option>              
    <option value="11">Mr. ABC</option>
</select>
    </td>
    <td><input type="text" value="" />
    </td>
    <td><button id="" class="add_more_items">Add</button>
    </td>
  </tr>
</table>