How to disable previous selected options when select option from first select

Question

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.

Answer 1

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.com/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