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