基於第一個下拉菜單選項禁用第二個下拉菜單選項

Question

我需要禁用Aspired下拉菜單中的選項。 例如，用戶為“當前”選擇3，則選項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獲取“當前”選擇的值，為此可以為選項添加click事件監聽器。 要獲取值，請簽出該線程使用JavaScript在下拉列表中獲取選定的值？ 從那里，用它來自動填充的渴望選擇元素的選項，使用基於第一個值條件...這可能有助於最后一步添加選項用JavaScript來選擇

Answer 3

如果可以使用Jquery。 您需要從“當前選擇”中選擇所選擇的值，例如n。 然后循環，直到Aspired select中的該值從1到n，並將'disabled attribute'添加為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
            }

        });
    });

Answer 4

 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>