Question

我有两个选择元素。两个选择具有相同的值。当我从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>

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

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

Answer 1

使用:lt选择索引小于指定值的元素。

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

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

＆＃13;

$('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);
})

＆＃13;

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

＆＃13;

Fiddle here

Answer 2

尝试以下代码如果它对您有用

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

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

2 个答案: