Question：下面的代码是隐藏所选项目下拉列表中的选项。因此，当用户选择该选项时，它将隐藏所有下拉选择列表中的所选值。我现在有四个下拉选择，我想实现像当下拉选择被触发时它将启用当前选择的选项值（意味着用户能够在用户触发时选择回下拉选择中的值）。我尝试使用此行代码来禁用该值$(this).find('option').prop('disabled', false);，但它仅适用于最后一次单击下拉选择。任何人都可以帮助解决这个问题吗？
$(".firstname").on('change', function() {
$(".firstname option").prop("disabled", false); //enable everything
//collect the values from selected;
var arr = $.map(
$(".firstname option:selected"),
function(n) {
return n.value;
}
);
//disable elements
$(".firstname option").filter(function() {
return $.inArray($(this).val(), arr) > -1; //if value is in the array of selected values
}).prop("disabled", true);
//re-enable elements
$(".firstname option").filter(function() {
return $.inArray($(this).val(), arr) == -1; //if value is not in the array of selected values
}).prop("disabled", false);
$(this).find('option').prop('disabled', false); //re-enable the current one
});
$('.savebtn').on('click', function() {
$('.cbb').find('select option:selected').each(function(index, item) {
var selectVal = $(this).val();
console.log(selectVal);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cbb">
<select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_148" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">
<option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
<option value="1">K-76</option>
<option value="2">Af</option>
<option value="3">A-c</option>/option>
<option value="4">D-B</option>
<option value="5">329</option>
<option value="6">F-g</option>
<option value="7">AT</option>
</select>
<select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_149" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">
<option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
<option value="1">K-76</option>
<option value="2">Af</option>
<option value="3">A-c</option>/option>
<option value="4">D-B</option>
<option value="5">329</option>
<option value="6">F-g</option>
<option value="7">AT</option>
</select>
<select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_149" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">
<option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
<option value="1">K-76</option>
<option value="2">Af</option>
<option value="3">A-c</option>/option>
<option value="4">D-B</option>
<option value="5">329</option>
<option value="6">F-g</option>
<option value="7">AT</option>
</select>
<select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_150" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">
<option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
<option value="1">K-76</option>
<option value="2">Af</option>
<option value="3">A-c</option>/option>
<option value="4">D-B</option>
<option value="5">329</option>
<option value="6">F-g</option>
<option value="7">AT</option>
</select>
</div>
<button type="button" class="btn btn-primary savebtn">Save</button>
您只能使用一个each循环并迭代所有选择并禁用具有相同值的其他选择的值。另外，要排除已迭代禁用的 select 选项，您可以使用not(this) .
演示代码 :
$(".firstname").on('change', function() {
//enable all
$("select.firstname option").prop('disabled', false)
//loop through select box
$("select.firstname").each(function() {
var values = $(this).val()
if (values != "-1") {
//find option where value matches disable them
$("select.firstname").not(this).find("option[value=" + values + "]").prop('disabled', true);
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cbb">
<select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_148" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">
<option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
<option value="1">K-76</option>
<option value="2">Af</option>
<option value="3">A-c</option>/option>
<option value="4">D-B</option>
<option value="5">329</option>
<option value="6">F-g</option>
<option value="7">AT</option>
</select>
<select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_149" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">
<option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
<option value="1">K-76</option>
<option value="2">Af</option>
<option value="3">A-c</option>/option>
<option value="4">D-B</option>
<option value="5">329</option>
<option value="6">F-g</option>
<option value="7">AT</option>
</select>
<select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_149" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">
<option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
<option value="1">K-76</option>
<option value="2">Af</option>
<option value="3">A-c</option>/option>
<option value="4">D-B</option>
<option value="5">329</option>
<option value="6">F-g</option>
<option value="7">AT</option>
</select>
<select class="form-control select2 firstname v1 select2-hidden-accessible" id="name1_150" name="name[]" style="width: 100%;" data-select2-id="name1_148" tabindex="-1" aria-hidden="true">
<option value="-1" selected="" disabled="" data-select2-id="299">Please Select Name</option>
<option value="1">K-76</option>
<option value="2">Af</option>
<option value="3">A-c</option>/option>
<option value="4">D-B</option>
<option value="5">329</option>
<option value="6">F-g</option>
<option value="7">AT</option>
</select>
</div>
<button type="button" class="btn btn-primary savebtn">Save</button>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
