Hide selected option in dropdown selection

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

      

The value that was selected should not appear in the dropdown list. For example, if I select "feb", Feb should not appear in the dropdown.

jsfiddle link: http://jsfiddle.net/jucLsmjx/

+3


source to share


4 answers


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

      

Additionally , if you want to run Option Hide from the beginning, 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>
      

Run codeHide result


+1


source


Your selector is option[value=' + optionval + ']')

incorrect. You are trying to select a parameter by its value, but the attribute is value='XXX'

missing, so try this:

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



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

});

      

0


source


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

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

      

Then enable and remove the selected <option>

from<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 want the original DOM element, then you can always add it to the DOM.

0


source


you can use the #mySelect: selected option to remove the parameter.

then you should change your text to ie blank if you want the value or text you can get before the value is set

   $('#mySelect').change(function(){
    $("#mySelect option:selected").hide();
    $("#mySelect option:selected").text('');
});

      

-1


source







All Articles