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

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>

Answer 2

现在还没有准备好编写任何代码，但是您可以在选择“当前”选择后使用 JavaScript 获取它的值，为此您可以为选项添加点击事件侦听器。 要获取值，请查看此线程 Get selected value in dropdown list using JavaScript? 从那里，使用基于第一个值的条件自动填充期望选择元素的选项...... 这可能有助于最后一步Adding options to select with javascript

Answer 3

function disFun(){

  var Aspired = document.getElementById("Aspired").options;
  var Current = document.getElementById("Current").value;
    
  for (var i=1;  i < +Current; i++) {
      Aspired[i].disabled = true;
  }

}

<label>Current:</label>
<select id="Current" name="Current" onchange="disFun()">
    <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 id="Aspired" 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 4

如果你可以使用 Jquery。您需要从当前选择中选择选择的值，例如 n。然后循环直到 Aspired 选择中的值从 1 到 n 并将“禁用属性”添加为 true

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

---

   $(document).ready(function(){
        $("select[name='Current']").change(function(){  
            $("select[name='Aspired']").children("option").attr('disabled', false) // makes all options to selectable in case of new selection in Current select
            for (i = 0; i < $(this).children("option:selected").val(); i++) {
              $("select[name='Aspired']").children('option[value='+ i +']').attr('disabled', true) // disabling all the values uptil the select value
            }

        });
    });