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，侦听更改，然后更改您将所选值放入选定的变量并循环选项过滤小于选定值的那些并将它们放入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>

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

3 个答案: