All geek questions in one place

How to dynamically change selections based on other selections in jQuery?

Please view image of selected HTML Shows many HTML sentences

The idea here is: if the user selects "A" in the first HTML selection list, "A" should not appear in other HTML selection lists. This should be dynamically updated in all lists, even if the user starts selecting in one of the selected lists in the middle. The code below is an incomplete incomplete solution. I think this is repeating itself. I want to conclude that to deduce options from HTML select lists, until the user reaches the last selection, only one parameter remains.
Selects have identifiers "1", "2", etc.
I have the following jQuery code :

<script> $(document).ready(function () { $("#1").change(function () { var val = $(this).val(); if (val == "A") { $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>"); } else if (val == "B") { $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>"); } else if (val == "C") { $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A'>A</option><option value='B'>B</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>"); } else if (val == "D") { $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>"); } else if (val == "E") { $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>"); } else if (val == "F") { $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>"); } else if (val == "G") { $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>"); } else if (val == "H") { $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='I'>I</option><option value='J'>J</option>"); } else if (val == "I") { $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='J'>J</option>"); } else if (val == "J") { $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option>"); } // end of ("#1").change JQUERY Function }); //end of .ready JQuery Function }); </script>

Any ideas that are easy will be greatly appreciated. Thanks in advance for any help.

+5
source share
3 answers

Here is an example using disabled instead of removing the option. this works to deselect or change an option.

 $('select').change(function() { // find the other selects var otherSelects = $('select').not(this); // get the old value of this select var oldValue = $(this).data('old'); //remove disabled from the other selects option for the old value if (oldValue) otherSelects.find('option[value=' + oldValue + ']').removeAttr('disabled'); //add disabled for the other selects option for the new value if (this.value) otherSelects.find('option[value=' + this.value + ']').attr('disabled', 'disabled'); // store the new value as old $(this).data('old', this.value); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select> <option></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select> <option></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select>
+3
source

I see that I have already beat it ... But since I have already spent enough time, here is a solution that really deletes all already selected parameters (reduced to three samples to simplify it, you just need to adapt the options object):

 $(document).ready(function() { var $allSelects = $('select.choice'); $allSelects.change(function() { var $this = $(this), $otherSelects = $allSelects.not($this); $otherSelects.each(function() { var $this = $(this), currentVal = $this.val(), options = {A: 0, B: 0, C: 0}, newOptionsMarkup = '<option value=""></option>'; for (o in options) { if (o == currentVal || !$('option[value="' + o + '"]:selected', $allSelects.not($this)).length) { newOptionsMarkup+= '<option value="' + o + '">' + o + '</option>'; } } $this.empty().html(newOptionsMarkup).find('option[value="' + currentVal + '"]').attr('selected', true); }); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="choice"> <option value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select class="choice"> <option value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select class="choice"> <option value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select>

According to the enigmas note regarding BenG's solution, here, if you want to save all the parameters in all select and just want to reset select another selection list in which it was already selected:

 $(document).ready(function() { var $allSelects = $('select.choice'); $allSelects.change(function() { var $this = $(this), $otherSelects = $allSelects.not($this); $('option[value="' + $this.val() + '"]:selected', $otherSelects).parent().val(''); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="choice"> <option value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select class="choice"> <option value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select class="choice"> <option value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select>
+2
source

I see that they beat me. Here is my solution anyway.

However, this solution requires O (n) operation every time something is selected to generate an array of "used" values, which is not ideal.

 $("#row1 > select").change(function() { var selected = []; $('#row1 > select').each(function() { selected.push(this.value); }); $("#row1 > select option").prop('disabled', false); $.each(selected, function(index, value) { $("#row1 > select option[value='" + value + "']").prop('disabled', true); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="row1"> <select> <option disabled selected value>--</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select> <option disabled selected value>--</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select> <option disabled selected value>--</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> </div>
+1
source

Source: https://habr.com/ru/post/1264028/

More articles:


All Articles