javascript - 基于第一个下拉菜单选项禁用第二个下拉菜单选项

Question

我需要禁用“Aspired”下拉菜单中的选项。 例如，用户为“当前”选择了 3，而对于 Aspired，选项 1 和 2 将被禁用。如果用户在“当前”中选择 4，则选项 1、2 和 3 将被禁用，依此类推。我需要使用 JavaScript 创建逻辑方面的帮助。

<label>Current:</label>
<select name="Current">
  <option value="select">Select</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>

<label>Aspired:</label>
<select name="Aspired">
  <option value="select">Select</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>

Answer 1

这可能对你的逻辑有帮助。请记住，这是 ES6 方式。

纯Js ES6版本

function onCurrentChange() {
  const options = document.getElementById("aspired").options;
  const listArray = Array.from(options);
  listArray.forEach(item => {
    if (item.value < document.getElementById("current").value) {
      item.disabled = true;
    }
  });
}

<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
  <option value="select">Select</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>

<label>Aspired:</label>
<select name="Aspired" id="aspired">
  <option value="select">Select</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>

向后兼容版本(IE9+)版本

function onCurrentChange() {
  const options = document.getElementById("aspired").options;
  Array.prototype.forEach.call(options, function(child, index) {
    if (child.value < document.getElementById("current").value) {
      child.disabled = true;
    }
  });
}

<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
  <option value="select">Select</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>

<label>Aspired:</label>
<select name="Aspired" id="aspired">
  <option value="select">Select</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>

Jquery版本

function onCurrentChange() {
  $("#aspired option").each(function() {
    if ($(this).val() < $("#current").val()) {
      $(this).attr("disabled", true);
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
  <option value="select">Select</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>

<label>Aspired:</label>
<select name="Aspired" id="aspired">
  <option value="select">Select</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>