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

仅供引用:如果您未设置value元素的option属性，则value只是该option的文本内容，因此在您的情况下，您无需在任何value上设置options。
内联查看其他注释:

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>