How can I set the default value for an HTML
How can I set the default value for an HTML
Question
I thought that adding a "value"
attribute set on the <select>
element below would cause the <option>
containing my provided "value"
to be selected by default:
<select name="hall" id="hall" value="3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
However, this did not work as I had expected. How can I set which <option>
element is selected by default?
Accepted Answer
Set selected="selected"
for the option you want to be the default.
<option selected="selected">
3
</option>
Read more... Read less...
In case you want to have a default text as a sort of placeholder/hint but not considered a valid value (something like "complete here", "select your nation" ecc.) you can do something like this:
<select>
<option value="" selected disabled hidden>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
Complete example:
<select name="hall" id="hall">
<option>
1
</option>
<option>
2
</option>
<option selected>
3
</option>
<option>
4
</option>
<option>
5
</option>
</select>
I came across this question, but the accepted and highly upvoted answer didn't work for me. It turns out that if you are using React, then setting selected
doesn't work.
Instead you have to set a value in the <select>
tag directly as shown below:
<select value="B">
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
Read more about why here on the React page.
You can do it like this:
<select name="hall" id="hall">
<option> 1 </option>
<option> 2 </option>
<option selected> 3 </option>
<option> 4 </option>
<option> 5 </option>
</select>
Provide "selected" keyword inside the option tag, which you want to appear by default in your drop down list.
Or you can also provide attribute to the option tag i.e.
<option selected="selected">3</option>
if you want to use the values from a Form and keep it dynamic try this with php
<form action="../<SamePage>/" method="post">
<?php
$selected = $_POST['select'];
?>
<select name="select" size="1">
<option <?php if($selected == '1'){echo("selected");}?>>1</option>
<option <?php if($selected == '2'){echo("selected");}?>>2</option>
</select>
</form>