Question

<select id="studentinst" size="6">
    <option value="1">First Installment</option>
    <option value="2">Second Installment</option>
    <option value="3">Third Installment</option>
    <option value="4">Fourth Installment</option>
    <option value="5">Fifth Installment</option>
    <option value="6">Sixth Installment</option>
</select>

如果我选择4，它应该只显示前4个选项，其余部分应该隐藏。期望的输出：

  First Installment
  Second Installment  
  Third Installment
  Fourth Installment

如何使用jQuery实现这一目标？

请参阅示例link检查此链接... for循环在此处不起作用

Answer 1

$('#studentinst').change(function() {
    if ($('option:selected').val() == 4) {

        $("#studentinst option[value=5]").remove();
        $("#studentinst option[value=6]").remove();
    }
    else {
        if ($('#studentinst option[value=5]').val() == null)

        $('<option>').text('Fifth Installment').val(5).appendTo($('#studentinst'));

        if ($('#studentinst option[value=6]').val() == null) $('<option>').text('Sixth Installment').val(6).appendTo($('#studentinst'));
    }
});

如果隐藏不能按预期工作，这是另一种方法。

see sample

Answer 2

这样的事情应该有效，可能会有更短的方法吗？

$(document).ready(function(){
    $('#studentinst').change(function(){
        var selectedIndex = $('#studentinst :selected').index();            
        $('#studentinst option').each(function(){
            if($(this).index() > selectedIndex){
                $(this).hide(); //or you can use .remove();
            }
        });
    });
});

此方法基于选项索引但您可以使用.val（）而不是.index（），如果您基于值进行删除

jQuery：根据所选选项更改列表中的可用选项

2 个答案: