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

Question

我一直在玩 jQuery 和两个选择框小于第一个框中选择的内容。

这里是 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 值时删除“禁用”属性。 因此，首先在 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();