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

我有一些像下面的选项值现在我试图做什么？在jquery中选定的选项后隐藏特定的选项

我需要隐藏所选选项后的选项值。我怎样才能通过使用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的实现这一目标？

来源

2016-07-08 Question User

$('#month option:selected').nextAll().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>

使用.nextAll()

说明：获取每个元素的所有兄弟姐妹下列集合中的匹配元素，任选地通过一个选择器过滤的。

来源

2016-07-08 09:01:08 guradio

选择检查一个后，所有的选项，并隐藏他们：https://jsfiddle.net/Lq537tas/1/

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

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

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

我已经加入附加的第一选项检查时不会隐藏其余部分。否则，如果选择1月份，则无法更改月份。

来源

2016-07-08 09:01:20 pawel

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

来源

2016-07-08 09:05:07 user3154108

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

回答

相关问题