Jquery/Javascript：比较两个下拉最小值和最大值？

Question

我有两个下拉菜单。一个有最小值，另一个有最大值。

如果选项小于最小值，我会尝试禁用最大下拉列表中的选项

<div>
  <select id="min">
    <option>Select min</option>
    <option value=0>0</option>
    <option value=1>1</option>
    <option value=2>2</option>
    <option value=3>3</option>
    <option value=4>4</option>
    <option value=5>5</option>
  </select>

  <select id="max">
    <option>Select max</option>
    <option value=2>2</option>
    <option value=3>3</option>
    <option value=4>4</option>
    <option value=5>5</option>
    <option value=6>6</option>
    <option value=7>7</option>
  </select>
</div>

Answer 1

仅供参考：如果您不设置 option 元素的 value 属性，则 value 将成为该 option 的文本内容，因此在您的情况下，您不需要在任何options 上设置value。

查看其他内联 cmets：

let maxSelect = document.getElementById("max");
let minSelect = document.getElementById("min")

// When the first select's value is changed...
minSelect.addEventListener("change", function(){

  // Loop through all the <option> elements in the second list
  maxSelect.querySelectorAll("option").forEach(function(opt){
  
    // Check the option value to see if it is more than the value
    // of the first select. If so, disable it, otherwise enable it.
    // The prepended + implicitly converts the string values to numbers
    if(+minSelect.value > +opt.value){
      opt.disabled = true;
    } else {
       opt.disabled = false;   
    }
    
  });

});

<div>
  <select id="min">
    <option>Select min</option>
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>

  <select id="max">
    <option>Select max</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
  </select>
</div>