禁用已被其他选择选择的选项(动态添加选择框)
我有一个问题来禁用已在其他选择中选择的选项。选择框可以动态添加,无限制。我已经尝试过我的脚本,但不能很好地工作。禁用已被其他选择选择的选项(动态添加选择框)
我有这样
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>
你的代码逻辑形式&脚本是有点歪,这应该为你
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>
我可以用你的代码加倍选择相同的选项。屏幕截图:https://drive.google.com/file/d/0B3N1soemM4ieZ2x3U2dpX19RQXM/view?usp=sharing – brobrobrobrobro
@brobrobrobrobro笔记记录将修复它 –
如果我选择安迪然后改为老板,在另一选择安迪也被禁用 – brobrobrobrobro
请尝试工作小提琴 – ScanQR
完@TechBreak – brobrobrobrobro