javascript - how to change a select options dynamically based on other select options in JQuery? - Stack Overflow

IT技术

更新时间：2025-03-190

admin管理员组
文章数量:1335599

Please see the image of the HTML selects

The idea here: if the user chooses "A" in the first HTML select list, "A" should not appear in the other HTML select lists. This should be dynamically updated in all lists even if the user begin to choose in one of the Select lists in the middle. The code below is a partial imperfect inplete solution. I think it is repetitive. What I want to do is to keep deducing options from HTML Select lists until if the user reaches the last Select, only one option remains.
The Selects have ids "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 would be greatly appreciated. Thanks in advance for any help.

Please see the image of the HTML selects

The idea here: if the user chooses "A" in the first HTML select list, "A" should not appear in the other HTML select lists. This should be dynamically updated in all lists even if the user begin to choose in one of the Select lists in the middle. The code below is a partial imperfect inplete solution. I think it is repetitive. What I want to do is to keep deducing options from HTML Select lists until if the user reaches the last Select, only one option remains.
The Selects have ids "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 would be greatly appreciated. Thanks in advance for any help.

Share Improve this question asked Feb 9, 2017 at 15:40 HB87 4138 silver badges17 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

Here is an example using disabled instead of removing the option. this works for unselecting or changing an option also.

$('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./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>

I see I've already been beat to it... But as I already invested quite an amount of time, here's a solution that really removes all options that are already selected (reduced to three selects to make it simpler, 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./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>

As per enigmas ment on BenG's solution, here's a way if you want to keep all options in all selects and just want to reset the other select list where it has already been 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./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>

I see I've been beaten to it. Here's my solution anyway.

However, this solution requires an O(n) operation every time something is selected to generate the array of "used" values, which isn't 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./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>

本文标签： javascripthow to change a select options dynamically based on other select options in JQueryStack Overflow

版权声明：本文标题：javascript - how to change a select options dynamically based on other select options in JQuery? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1742393115a2466383.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - how to change a select options dynamically based on other select options in JQuery? - Stack Overflow

3 Answers 3

更多相关文章