使用 jQuery 和两个选择，select2 显示禁用的选项，其值低于 select1？

Question

我一直在玩 jQuery 和两个 select 盒子我想根据第一个选项 selected 更改第二个盒子中的可用选项框，第二个框中可用的选项的值应小于第一个框中 selected 的值。

这里是 HTML:

<select class="select1">
  <option value="100">100</option>
  <option value="200">200</option>
</select>

<select class="select2">
  <option value="0">0</option>
  <option value="100">100</option>
  <option value="200">200</option>
  <option value="300">300</option>
</select>

这里是 jQuery:

var select1 = $(".select1");
var select2 = $(".select2");

select1
.change(function () {

  var select1Value = parseInt($(this).val(),10);

  select2.children().filter(function () {
    return $(this).attr("value") > select1Value;
  }).each(function () {
    $(this).attr('disabled', 'disabled')
  });

})
.change();

Here is a fiddle.

这里发生的是在初始化时 .select2 中值为 200 和 300 的选项被禁用。当我将 select1 更改为 200 时，我希望发生的是 select2 中值为 300 的选项被禁用，但是之前禁用但现在有效的选项应该被启用，但是这是并非如此，因为初始化时发生的事情并没有真正改变。

如果有人能指出我在这个逻辑上哪里出了问题，那将不胜感激，在此先感谢！

Answer 1

已禁用的值必须在每次更改 select1 中的值时删除 "disabled" 属性。因此，首先在更改 select1 的值时，我们删除 select2 中所有选项的禁用状态，然后检查值是更大还是更小。

代码如下：

var select1 = $(".select1");
var select2 = $(".select2");

select1
.change(function () {

  var select1Value = parseInt($(this).val(),10);

  select2.children().each(function () {
    $(this).prop('disabled', false);
  });

  select2.children().filter(function () {
    return $(this).attr("value") > select1Value;
  }).each(function () {
    $(this).prop('disabled', true);
  });

}).change();

Answer 2

var select1 = $(".select1");
var select2 = $(".select2");

select1
.change(function () {
  select2.children().each(function () {
    $(this).removeAttr('disabled')
  });
  var select1Value = parseInt($(this).val(),10);
  select2.children().filter(function () {
    return $(this).attr("value") > select1Value;
  }).each(function () {
    $(this).attr('disabled', 'disabled')
  });

  })
.change();

使用 jQuery 和两个选择，select2 显示禁用的选项，其值低于 select1？

Using jQuery and two selects, select2 shows disabled options with a lower value than select1?

jquery

select

onchange

options