我在禁用已在另一个选择中选择的选项时遇到问题。选择框可以动态添加，无限制。我已尝试使用下面的脚本，但效果不佳。
我有一个表格＆amp;像这样的脚本
var counteritem = 2;
var usedOptions = [];
function updateCounterItem(isRemove)
{
if (isRemove)
{
counteritem = counteritem - 1;
} else
{
counteritem = counteritem + 1;
}
if (counteritem > 1)
{
$("button#remove").prop("disabled", false);
} else
{
$("button#remove").prop("disabled", true);
}
}
$(document).ready(function()
{
updateCounterItem(true);
var counter = 1;
$('button#add').on('click', function(e)
{
e.preventDefault();
$('div.featured-item').last().clone().appendTo('div#featured-items');
counter = counter + 1;
$('.featured-item label').last().replaceWith('<label>Featured #' + counter + '</label>');
$('.featured-item select').last().attr('id', 'featured' + counter);
updateCounterItem(false);
$('.featured-item select').find('option').prop('disabled', false);
for (key in usedOptions)
{
value = usedOptions[key];
$('.featured-item select').find('option[value="' + value + '"]').prop('disabled', true);
}
console.log(usedOptions);
});
$('button#remove').on('click', function(e)
{
e.preventDefault();
console.log(usedOptions);
$('div.featured-item').last().remove();
counter = counter - 1;
updateCounterItem(true);
});
$(document).on('click', 'select', function()
{
$(this).find('option[value="' + $(this).val() + '"]').prop('disabled', false);
});
$(document).on('change', 'select', function()
{
var thisVal = $(this).val();
usedOptions = [];
$('option').prop('disabled', false);
$('select').each(function()
{
var value = $(this).val();
usedOptions[$(this).attr('id')] = value;
});
var value = '';
for (key in usedOptions)
{
value = usedOptions[key];
$('option[value="' + value + '"]').prop('disabled', true);
$('#' + key + ' option[value=' + value + ']').prop('disabled', false);
}
$(this).find('option[value="' + thisVal + '"]').prop('disabled', false);
console.log(usedOptions);
});
});<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>
答案 0 :(得分：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>