How to empty a value from the first option of a select box option using javascript or jquery? - Stack Overflow

admin2025-04-18 0

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 bee 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();

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 bee 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();

Share edited Aug 23, 2019 at 12:18 asked Aug 23, 2019 at 12:12 Designer 89510 silver badges29 bronze badges

Did you just make this so you could answer your own question? – Ryan Wilson Commented Aug 23, 2019 at 12:16
No i will remove my answer cause it solves partially the problem. Check below...I will add a ment. – Designer Commented Aug 23, 2019 at 12:17
Based on your question, I would think your provided answer would acplish what you want, what is wrong with the answer your provided? – Ryan Wilson Commented Aug 23, 2019 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 Commented Aug 23, 2019 at 12:19

Add a ment |

4 Answers 4

Sorted by: Reset to default 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 = '';

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

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

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

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1744949705a276258.html

How to empty a value from the first option of a select box option using javascript or jqueryStack Overflow

最新回复(0)