Reputation: 199
Question: Below code is to hide options from the dropdown of selected items. Thus, when the user selects the option it will hide the selected value in all the dropdowns selection lists. I have four dropdown selections right now, I want to achieve like it will enable current selected option value when the dropdown selection is trigger (Mean user able to select back the value in the dropdown selection when user trigger). I tried to use this line code to disabled the value $(this).find('option').prop('disabled', false);
, but it will only work for last click of the dropdown selection. Anyone can help with this issue ya?
$(".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>
Upvotes: 1
Views: 2023
Reputation: 8650
Turns out it's a bit more complex since there are multiple selects.
In the re-enable filter I've added a check agains the parent-select of each option to see what it's value is and if it's equal to the value of the option:
Also see this question. Apparently, you can't just do $(this).val();
within an onChange on a <select>
. It has to be vanilla js this.value
or in your case $( //some-jquery-object// )[0].value
. (The [0] converts jquery object to vanilla js element.)
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>
Upvotes: 1
Reputation: 28522
You can use only one each
loop and iterate through all your selects and disable value from other selects with same values . Also , to exclude the option of select which is been iterated to be disable you can use not(this)
.
Demo Code :
$(".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>
Upvotes: 2