禁用已被其他選擇選擇的選項（動態添加選擇框）

Question

我有一個問題來禁用已在其他選擇中選擇的選項。選擇框可以動態添加，無限制。我已經嘗試過我的腳本，但不能很好地工作。

我有這樣

var counteritem = 2; 
 
var usedOptions = []; 
 
function updateCounterItem(isRemove) 
 
{ 
 
\t if (isRemove) 
 
\t { 
 
\t \t counteritem = counteritem - 1; 
 
\t } else 
 
\t { 
 
\t \t counteritem = counteritem + 1; 
 
\t } 
 

 
\t if (counteritem > 1) 
 
\t { 
 
\t \t $("button#remove").prop("disabled", false); 
 
\t } else 
 
\t { 
 
\t \t $("button#remove").prop("disabled", true); 
 
\t } 
 
} 
 
$(document).ready(function() 
 
\t { 
 
\t \t updateCounterItem(true); 
 
\t \t var counter = 1; 
 
\t \t $('button#add').on('click', function(e) 
 
\t \t \t { 
 
\t \t \t \t e.preventDefault(); 
 
\t \t \t \t $('div.featured-item').last().clone().appendTo('div#featured-items'); 
 
\t \t \t \t counter = counter + 1; 
 
\t \t \t \t $('.featured-item label').last().replaceWith('<label>Featured #' + counter + '</label>'); 
 
\t \t \t \t $('.featured-item select').last().attr('id', 'featured' + counter); 
 
\t \t \t \t updateCounterItem(false); 
 

 
\t \t \t \t $('.featured-item select').find('option').prop('disabled', false); 
 
\t \t \t \t for (key in usedOptions) 
 
\t \t \t \t { 
 
\t \t \t \t \t value = usedOptions[key]; 
 
\t \t \t \t \t $('.featured-item select').find('option[value="' + value + '"]').prop('disabled', true); 
 
\t \t \t \t } 
 
\t \t \t \t console.log(usedOptions); 
 
\t \t \t }); 
 
\t \t $('button#remove').on('click', function(e) 
 
\t \t \t { 
 
\t \t \t \t e.preventDefault(); 
 
\t \t \t \t console.log(usedOptions); 
 
\t \t \t \t $('div.featured-item').last().remove(); 
 
\t \t \t \t counter = counter - 1; 
 
\t \t \t \t updateCounterItem(true); 
 
\t \t \t }); 
 
\t \t $(document).on('click', 'select', function() 
 
\t \t \t { 
 
\t \t \t \t $(this).find('option[value="' + $(this).val() + '"]').prop('disabled', false); 
 
\t \t \t }); 
 
\t \t $(document).on('change', 'select', function() 
 
\t \t \t { 
 
\t \t \t \t var thisVal = $(this).val(); 
 
\t \t \t \t usedOptions = []; 
 
\t \t \t \t $('option').prop('disabled', false); 
 
\t \t \t \t $('select').each(function() 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t var value = $(this).val(); 
 
\t \t \t \t \t \t usedOptions[$(this).attr('id')] = value; 
 
\t \t \t \t \t }); 
 
\t \t \t \t var value = ''; 
 
\t \t \t \t for (key in usedOptions) 
 
\t \t \t \t { 
 
\t \t \t \t \t value = usedOptions[key]; 
 
\t \t \t \t \t $('option[value="' + value + '"]').prop('disabled', true); 
 
\t \t \t \t \t $('#' + key + ' option[value=' + value + ']').prop('disabled', false); 
 
\t \t \t \t } 
 
\t \t \t \t $(this).find('option[value="' + thisVal + '"]').prop('disabled', false); 
 
\t \t \t \t console.log(usedOptions); 
 
\t \t \t }); 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box-body"> 
 
    <button id="add" class="btn btn-primary"><i class="fa fa-plus-circle"></i> Add item</button> 
 
    <button id="remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i> Remove last item 
 
    </button> 
 
    <hr> 
 
    <div id="featured-items"> 
 
     <div class="featured-item form-group"> 
 
      <label>Featured #1</label> 
 
      <select id="featured1" name="sort[]" class="form-control featured"> 
 
       <option disabled selected>Select one</option> 
 
       <option class="item" value="1">Andy</option> 
 
       <option class="item" value="2">Boss</option> 
 
       <option class="item" value="3">Cindy</option> 
 
       <option class="item" value="4">Drek</option> 
 
      </select> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

你的代碼邏輯形式&腳本是有點歪，這應該爲你

var new_id; 
 
var selected_val_arrray = []; 
 
//adding 
 
$(document).on('click', "#add", function() { 
 
    var el = $(".featured-item").last() 
 
    var clone_holder = el.clone(true); 
 

 
    var current_items_count = $(".featured-item").length 
 
    new_id = current_items_count + 1; 
 

 
    var select_els = $(".featured_select") 
 
    select_els.each(function() { 
 
    var curr_select_el = $(this); 
 
    var curr_select_el_val = curr_select_el.val(); 
 
    selected_val_arrray.push(curr_select_el_val) 
 
    }) 
 

 
    $("#featured-items").append(clone_holder); 
 

 
    var new_last_featured = $(".featured-item").last() 
 
    new_last_featured.children('label').text('Featured #' + new_id); 
 
    new_last_featured.children('select').attr('id', 'featured' + new_id) 
 

 
    var selected_val_arrray_length = selected_val_arrray.length 
 
    for (var i = 0; i < selected_val_arrray_length; i++) { 
 
    var select_els = $(".featured_select"); 
 
    select_els.each(function() { 
 
     var curr_select_el = $(this); 
 
     var curr_select_el_val = curr_select_el.val() 
 
     
 
     if(selected_val_arrray[i] != curr_select_el_val) 
 
     { 
 
     curr_select_el.find('option[value="' + selected_val_arrray[i] + '"]').prop('disabled', true); 
 
      } 
 
    }) 
 
    } 
 

 
}) 
 

 
//for disabling 
 
$(document).on('change', ".featured_select", function() { 
 
    var el = $(this); 
 
    var el_id = el.attr('id'); 
 

 
    var el_value = el.val(); 
 

 
    var select_els = $(".featured_select"); 
 
    select_els.each(function() { 
 
    var curr_select_el = $(this); 
 
    var curr_select_el_id = curr_select_el.attr('id'); 
 
    if (curr_select_el_id != el_id) { 
 
     console.log("dd"); 
 
     curr_select_el.find('option[value="' + el_value + '"]').prop('disabled', true); 
 
    } 
 
    }) 
 
}) 
 

 
//removing 
 
$(document).on('click', "#remove", function() { 
 
    var el = $(".featured-item").last() 
 
    var el_select = el.children('select'); 
 
    var el_select_val = el_select.val(); 
 

 
    console.log(el_select_val); 
 
    var select_els = $(".featured_select") 
 
    select_els.each(function() { 
 
    var curr_select_el = $(this); 
 
    curr_select_el.find('option[value="' + el_select_val + '"]').prop('disabled',false); 
 
    }) 
 

 
    if ($(".featured-item").length != 1) { 
 
    el.remove() 
 
    } 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="box-body"> 
 
    <button id="add" class="btn btn-primary"><i class="fa fa-plus-circle"></i> Add item</button> 
 
    <button id="remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i> Remove last item 
 
    </button> 
 
    <hr> 
 
    <div id="featured-items"> 
 
    <div class="featured-item form-group"> 
 
     <label>Featured #1</label> 
 
     <select id="featured1" class="featured_select" name="sort[]" class="form-control featured"> 
 
     <option disabled selected>Select one</option> 
 
     <option class="item" value="Andy">Andy</option> 
 
     <option class="item" value="Boss">Boss</option> 
 
     <option class="item" value="Cindy">Cindy</option> 
 
     <option class="item" value="Drek">Drek</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
</div>