Hide the selected option in select dropdown list

Question

<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.net/jucLsmjx/

Answer 1

$('#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.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

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.net/jucLsmjx/8/

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

});

Answer 3

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.