3

Here's my code. Is it possible to empty the value of the first option using jquery/javascript ? 

<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>

so it will become like that:

<option value="">Select category</option>

I already know that i can remove the whole first option by targeting its value 

$("#select_1 option[value='0']").remove();
Designer
  • 875
  • 7
  • 26
  • Did you just make this so you could answer your own question? – Ryan Wilson Aug 23 '19 at 12:16
  • No i will remove my answer cause it solves partially the problem. Check below...I will add a comment. – Designer Aug 23 '19 at 12:17
  • Based on your question, I would think your provided answer would accomplish what you want, what is wrong with the answer your provided? – Ryan Wilson Aug 23 '19 at 12:17
  • The problem is that my code will empty the value if is equal to zero (value="0"). What i want is to empty the value of the very first option no matter if the value is 0 or something else. – Designer Aug 23 '19 at 12:19

4 Answers4

4

You can use plain javascript to get the first option of a select element using .options like so, which returns an indexed collection, so you can just use zero based index to grab the first option and set it's value property:

document.getElementById("select_1").options[0].value = '';
Ryan Wilson
  • 10,223
  • 2
  • 21
  • 40
  • @Designer I believe Rory was first to answer, so he is deserving of the points for the accepted answer, but if you want to use plain javascript instead of relying on a JQuery library, this answer would provide what you need. – Ryan Wilson Aug 23 '19 at 12:24
2

To target the first element of a collection use :first. Then you can use val('') to remove the value from it:

$('#select_1 option:first').val('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • 1
    OR `$('#select_1').find('option').first().val('');` which I prefer due to the right to left processing of the sizzle engine jQuery uses. – Mark Schultheiss Aug 23 '19 at 12:24
  • Shouldn't be `$('#select_1').find('option').first().val('');` ? – Designer Aug 23 '19 at 12:26
  • more details on "context" and my comment, but yes either one will work and only on a very large DOM or micro optimized page is there relevance https://stackoverflow.com/a/16423239/125981 ( or really old browsers where is shows up more ) – Mark Schultheiss Aug 23 '19 at 12:32
0
<script>
$(document).ready(function (){

 $('#btnremoveoption').click(function (){
   $('#select_1 option:first').remove();
 });

});

</script>
<body>
    <select id="select_1" name="select_1" class="category-select required">
      <option value="0">Select category</option>
      <option value="1">Phones</option>
      <option value="2">Computers</option>
      <option value="3">Tablets</option>
    </select>
<input type="button" id="btnremoveoption" value="Click to Remove all Options" onclick="Remove_options()"/>
</body>

This Program will keep Removing first option when ever button will be click.

John T Oliveira
  • 11
  • 2
0
$(document).ready(function (){


   $('#select_1 option:first').remove();


});

this will remove it onload of the page. without leaving the option blank it will be filled with the next option.

John T Oliveira
  • 11
  • 2