jQuery根據第一選擇菜單中的選擇值填充第二選擇菜單

Question

我需要有2個選擇菜單。 在第一個選擇菜單中選擇的選項將填充第二個選擇菜單，但其值必須大於在第一個選擇菜單中選擇的值。

第一選擇菜單的值范圍是1到10，因此，如果選擇“ 4”，第二菜單將顯示5到10的選項。

我需要動態地填充第二個選擇菜單，而不是簡單地“刪除”選擇菜單中的選項。

<select id="selectMenu1">
  <option value="Select">Select</option>
  <option value="10">10</option>
  <option value="9">9</option>
  <option value="8">8</option>
  <option value="7">7</option>
  <option value="6">6</option>
  <option value="5">5</option>
  <option value="4">4</option>
  <option value="3">3</option>
  <option value="2">2</option>
  <option value="1">1</option>
</select>
<select id="selectMenu2">
</select>

Answer 1

嘗試這個

<script>
    $(function(){
         $('#selectMenu1').change(function(){
             var selectedVal = parseInt($('#selectMenu1').val());
             $('#selectMenu2').empty();
             for(var i = selectedVal + 1; i < 11; i++){
                 var opt = new Option(i, i);
                 $('#selectMenu2').append(opt);
             }

         });
    });

</script>

https://jsfiddle.net/n0n1rhLf/7/

Answer 2

您可以克隆選項元素，僅過濾所需內容，然后在其他選擇項上替換它們：

 $('#selectMenu1').on('change', function(){ var menuOne = $(this), menuTwo = $('#selectMenu2'); menuOne.children('option').clone().filter(function(index, el){ return Number($(el).val()) > Number(menuOne.val()) }).appendTo(menuTwo.empty()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="selectMenu1"> <option value="Select">Select</option> <option value="10">10</option> <option value="9">9</option> <option value="8">8</option> <option value="7">7</option> <option value="6">6</option> <option value="5">5</option> <option value="4">4</option> <option value="3">3</option> <option value="2">2</option> <option value="1">1</option> </select> <select id="selectMenu2"> </select> 

Answer 3

您將一個事件綁定到selectMenu1上，以監聽更改，然后在更改時將所選值放到selected變量中，並遍歷所有選項以篩選小於所選值的選項，然后將其放入selectMenu2

 $('#selectMenu1').on('change', function(){ var selected = $('option:selected', this).val(); var menu2Option = ''; $(this).find('option').each(function(idx, ele){ if(Number($(this).val()) > selected) { menu2Option += "<option value='"+$(this).val()+"'>"+$(this).text()+"</option>"; } }) $('#selectMenu2').html(menu2Option); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="selectMenu1"> <option value="Select">Select</option> <option value="10">10</option> <option value="9">9</option> <option value="8">8</option> <option value="7">7</option> <option value="6">6</option> <option value="5">5</option> <option value="4">4</option> <option value="3">3</option> <option value="2">2</option> <option value="1">1</option> </select> <select id="selectMenu2"> </select>