Question

我现在有一些选项价值如下，我想做的是什么？

我需要在所选选项后隐藏选项值。我怎么能用Jquery做到这一点？

HTML

<select name="month" id="month">
    <option val="January">January</option>
    <option val="February">February</option>
    <option val="March">March</option>
    <option val="April">April</option>
    <option val="May">May</option>
    <option val="June" selected="selected">June</option>
    <option val="July">July</option>
    <option val="August">August</option>
    <option val="September">September</option>
    <option val="October">October</option>
    <option val="November">November</option>
    <option val="December">December</option>
</select>

预期结果

 <select name="month" id="month">
        <option val="January">January</option>
        <option val="February">February</option>
        <option val="March">March</option>
        <option val="April">April</option>
        <option val="May">May</option>
        <option val="June" selected="selected">June</option>
        <option val="July" style="display:none;">July</option>
        <option val="August" style="display:none;">August</option>
        <option val="September" style="display:none;">September</option>
        <option val="October" style="display:none;">October</option>
        <option val="November" style="display:none;">November</option>
        <option val="December" style="display:none;">December</option>
    </select>

我如何在jquery中实现这一目标？

Answer 1

＆＃13;

$('#month option:selected').nextAll().hide()

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="month" id="month">
    <option val="January">January</option>
    <option val="February">February</option>
    <option val="March">March</option>
    <option val="April">April</option>
    <option val="May">May</option>
    <option val="June" selected="selected">June</option>
    <option val="July">July</option>
    <option val="August">August</option>
    <option val="September">September</option>
    <option val="October">October</option>
    <option val="November">November</option>
    <option val="December">December</option>
</select>

＆＃13;

使用.nextAll()

描述：获取匹配元素集中每个元素的所有后续兄弟，可选择由选择器过滤。

Answer 2

选中所选选项后的所有选项并隐藏它们：https://jsfiddle.net/Lq537tas/1/

$('option:checked ~ option').hide()

或者使用没有jQuery的纯CSS：https://jsfiddle.net/Lq537tas/

#month option + option:checked ~ option {
  display:none;
}

我添加了额外的第一个选项，在选中时不会隐藏其余部分。否则，如果选择了1月，则无法更改月份。

Answer 3

$(document).ready(function() {
  $('option').filter(':gt('+jQuery('option:selected').index()+')').hide();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="month" id="month">
    <option val="January">January</option>
    <option val="February">February</option>
    <option val="March">March</option>
    <option val="April">April</option>
    <option val="May">May</option>
    <option val="June" selected="selected">June</option>
    <option val="July">July</option>
    <option val="August">August</option>
    <option val="September">September</option>
    <option val="October">October</option>
    <option val="November">November</option>
    <option val="December">December</option>
</select>

在jquery中选中选项后隐藏特定选项

3 个答案: