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

Question

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

已选择的值不应出现在下拉列表中。例如，如果我选择“feb”，Feb 不应该出现在下拉列表中。

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

Answer 1

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

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

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

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

Answer 2

您的选择器option[value=' + optionval + ']') 错误。您正在尝试按其值选择选项，但缺少 value='XXX' 属性，因此请尝试以下操作：

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

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

});

Answer 3

只需克隆它（选择元素）并将其存储在变量中

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

然后继续从<select>中删除选中的<option>

$("#mySelect").change( function(e){
  e.preventDefault();
  var val = $(this).val();
  $("#mySelect option[value='"+val+"']").remove();
});

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