javascript - Hide the selected option in select dropdown list - Stack Overflow

admin管理员组

文章数量:1420530

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

The value which has been selected should not be appeared in the drop down. For instance, if i select "feb", Feb shouldn't appear in dropdown.

jsfiddle link: /

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

The value which has been selected should not be appeared in the drop down. For instance, if i select "feb", Feb shouldn't appear in dropdown.

jsfiddle link: http://jsfiddle/jucLsmjx/

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Aug 4, 2015 at 3:56 Roko C. Buljan 207k4141 gold badges328328 silver badges340340 bronze badges asked Aug 4, 2015 at 2:56 ShawnShawn 5111 silver badge22 bronze badges 2

• you forgot to close the last option tag properly. – Mike -- No longer here Commented Aug 4, 2015 at 2:59
• possible duplicate of Hide options in a select list using jQuery – Mohd Abdul Mujib Commented Aug 4, 2015 at 3:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

Additionally if you want to trigger the Option Hide right from the start, add .trigger('change');:

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect">
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>

Your selector option[value=' + optionval + ']') is wrong. You are trying to select the option by its value but value='XXX' attribute is missing, so try this:

http://jsfiddle/jucLsmjx/8/

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

});

Just clone it(select element) and store it inside a variable

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

Then go on and remove the selected <option> from the <select>

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

The cloning part was for the case where you needed the original DOM element, then you can always append it to the DOM.

本文标签： javascriptHide the selected option in select dropdown listStack Overflow