jQuery 根据第一个选择菜单中的值选择填充第二个选择菜单

jQuery populate 2nd select menu based on value select in 1st select menu

本文关键字：选择 菜单 填充 第二个 第一个 jQuery      更新时间：2023-09-26

我需要有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>

将事件绑定到 selectMenu1 侦听更改，然后在更改时侦听将所选值放入"所选变量"并循环浏览选项过滤那些小于选定值的，并将它们放入 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>

试试这个

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

您可以克隆选项元素，仅过滤所需的元素，然后在另一个选择中替换它们：

$('#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>

相关文章：