隐藏选择下拉列表中的选定选项

时间:2015-08-04 02:56:39

标签: javascript jquery html css

<select>
   <option>Jan</option>
   <option>Feb</option>
   <option>Mar</option>
</select>

选中的值不应出现在下拉列表中。例如,如果我选择&#34; feb&#34;,则二月不应该出现在下拉列表中。

jsfiddle链接:http://jsfiddle.net/jucLsmjx/

3 个答案:

答案 0 :(得分:1)

$('#mySelect').on("change", function(){
    $('option:selected', this).hide().siblings().show();
});

另外如果您想从头开始触发选项隐藏 ,请添加.trigger('change');

&#13;
&#13;
$('#mySelect').on("change", function(){
    $('option:selected', this).hide().siblings().show(); 
}).trigger('change');
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect">
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你的选择器option[value=' + optionval + ']')错了。您正尝试按其值选择该选项,但缺少value='XXX'属性,请尝试以下操作:

http://jsfiddle.net/jucLsmjx/8/

$('#mySelect').change(function(){
    var optionval = $('#mySelect').val();
    $('#mySelect  option:contains("'+optionval+'")').hide().siblings().show();;

});

答案 2 :(得分:0)

只需克隆它(选择元素)并将其存储在变量

foo

然后继续从var $original = $("#mySelect").clone(true); // The argument "true" copies any event handlers.

中删除所选的<option>
<select>

克隆部分适用于需要原始DOM元素的情况,然后您可以随时将其附加到DOM。