javascript - How to disable previous selected options when select option from first select - Stack Overflow

admin管理员组

文章数量:1392076

I have two select elements. both select have same values. when I select option from 1 select box it should disable all previous select options from second select box. Let's suppose I have this select:

  <select id="s1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>

  <select id="s2">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>

If I select value 3 from s1 box it should disable all previous options from s2 select. if I select value 2 from s1 it should disable all previous values in s2.

Note: It should not disable next values, just the previous ones. I'm looking for a jquery solution.

I have two select elements. both select have same values. when I select option from 1 select box it should disable all previous select options from second select box. Let's suppose I have this select:

  <select id="s1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>

  <select id="s2">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  </select>

If I select value 3 from s1 box it should disable all previous options from s2 select. if I select value 2 from s1 it should disable all previous values in s2.

Note: It should not disable next values, just the previous ones. I'm looking for a jquery solution.

• javascript
• jquery
• html

Share Improve this question Follow edited Mar 10, 2016 at 8:13 Shashank 2,07022 gold badges2121 silver badges4040 bronze badges asked Mar 10, 2016 at 6:18 Mossawir AhmedMossawir Ahmed 65544 gold badges1111 silver badges2727 bronze badges 2

• How about :lt selector ? – Rayon Commented Mar 10, 2016 at 6:19
• can you please give more details regarding :lt? a guide to implement :lt in my case? – Mossawir Ahmed Commented Mar 10, 2016 at 6:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Use :lt to select elements having lesser index than specified.

.index() will return position of the element from the matched element.

.not() will exclude specified element from the returned elements.

$('select').change(function() {
  $('select option').prop('disabled', false);
  var index = $(this).find('option:selected').index();
  $('select').not(this).find('option:lt(' + index + ')').prop('disabled', true);
})

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="s1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<select id="s2">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Fiddle here

Try below code If it is useful for you

$(document).ready(function() {
$("#s1").change(function() {
    var optVal = $(this).val();
    $("#s2 option").each(function() {
        $(this).prop('disabled', false);
        if (optVal > $(this).val()) {
            $(this).prop('disabled', true);
        }
    });
});});

本文标签： javascriptHow to disable previous selected options when select option from first selectStack Overflow