如何在从第一次选择中选择选项时禁用先前选择的选项

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都有相同的值。当我从1个选择框中选择选项时，它应该从第二个选择框中禁用所有先前的选择选项。假设我有这个选择:

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

如果我从s1框中选择值3，它应该禁用s2 select的所有以前的选项。如果我从s1中选择值2，它应该禁用s2中的所有先前的值。

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

注意:它不应该禁用下一个值，只禁用前一个值。我正在寻找jquery解决方案。

2 个解决方案

#1

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

使用:lt选择具有较小索引的元素。

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

.index()将从匹配的元素返回元素的位置。

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

.not()将从返回的元素中排除指定的元素。

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

小提琴在这里

#2

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);
        }
    });
});});

#1