HTML Dropdown禁用Javascript中的选项

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>

Answer 1

您只能使用一个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>

Answer 2

由于有多个选择，所以它有点复杂。

在重新启用过滤器中，我在每个选项的父选项上添加了一个检查，以查看它的值是什么，以及它是否等于选项的值：

另请参阅此问题。显然，不能只在<select>上的onChange中执行$(this).val();。它必须是香草jsthis.value，或者在您的情况下是$( //some-jquery-object// )[0].value。([0]将jquery对象转换为vanilla js元素。)

return $.inArray($(this).val(), arr) == -1 || $(this).parent('select')[0].value == $(this).val() }).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() {

//console.log( $(this).parent('select')[0].value, $(this).val());

return $.inArray($(this).val(), arr) == -1 || $(this).parent('select')[0].value == $(this).val() //if value is not in the array of selected values
}).prop("disabled", false);
//$(this).find('option:selected').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);
});
});

$parentSelect.find('option:selected').prop('value') == $parentSelect[0].value;
console.log($parentSelect.find('option:selected').prop('value'), $parentSelect[0].value)
console.log($parentSelect.find('option:selected').prop('value'), $parentSelect[0].value)

<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>