CODEWITHSUNDEEP
javascripthtmljquerycsswordpress
nasir
nasir

Reputation: 149

Remove select placeholder after selecting option

After selecting option from list hide placeholder (Select option). If after clicked on select box placeholder must be hidden.

<select class="name">
    <option value="">Select Option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>

Upvotes: 2

Views: 1577

Answers (2)

chriss
chriss

Reputation: 340

you can set a js-handler, to remove the Option-noe (here the jQuery Version):

<select class="name" id="myselect">
<option value="">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>

and the js

jQuery(function(){
    jQuery ('#myselect').on('change', function(){
    jQuery(this).find('[value=""]').remove();
  })
});

https://jsfiddle.net/k08zj6r9/

if you wish, you can disable the node, instead of remove.

jQuery(this).find('[value=""]').attr('disabled','disabled');

Upvotes: 0

matthias_h
matthias_h

Reputation: 11416

You could do it like this:

$("select").change(function() {
 $(this).find("option:first").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="name">
  <option value="">Select Option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
</select>

Upvotes: 4

Related Questions