How to Set the Default Value For an HTML ≪Select≫ Element

How can I set the default value for an HTML select element?

Set selected="selected" for the option you want to be the default.

<option selected="selected">

How to set default value of select in HTML?

You can use the selected attribute within the option to select a default response. If you add the option disabled and hidden then this will be an invalid option.

<select name='select' id='select'>
<option value='val1' selected disabled hidden>Choose option</option>
<option value='val1'>Val1</option>
<option value='val2'>Val2</option>

How to set default value in html for select element using Laravel

<select name="cty" id="country" class="form-control" required>
@foreach ($countries as $c)
<option value="{{ $c->id }}" {{ $c->id == 3 ? 'selected' : '' }}> {{ $c->name }} </option>

How to set the default value of a HTML select element with data from a database?

You need to add the selected attribute to the option that matches what was in $user['gender']

<div class="form-group">
<select class="form-control" name="gender">
<option value="female" <?php echo $user['gender'] == 'female' ? ' selected ' : '';?>>Female</option>
<option value="male" <?php echo $user['gender'] == 'male' ? ' selected ' : '';?>>Male</option>
<option value="none" <?php echo $user['gender'] == 'none' ? ' selected ' : '';?>>Prefer not to say</option>

Which is a shorter way of saying

<div class="form-group">
<select class="form-control" name="gender">
if ($user['gender'] == 'female' ) {
<option value="female" selected>Female</option>
<option value="male">Male</option>
<option value="none">Prefer not to say</option>

if ($user['gender'] == 'male' ) {
<option value="female">Female</option>
<option value="male" selected>Male</option>
<option value="none">Prefer not to say</option>

if ($user['gender'] == 'none') {
<option value="female">Female</option>
<option value="male">Male</option>
<option value="none" selected>Prefer not to say</option>


How to set default value for HTML select?

Note: this is JQuery. See Sébastien answer for Javascript

$(function() {
var temp="a";

<select name="MySelect" id="MySelect">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>

Natively set HTML select element to its default value

This is not difficult to do if you understand that properties are different from attributes. Attributes (generally) don't change, but properties do. The selected attribute will always remain as it is in the original HTML, while the selected property will depend on what's happened to the element in the lifetime of the page.

So you can select the original selected element based on its selected attribute and then set its selected property.

document.querySelector('option[selected]').selected = true;

jsFiddle demonstrating this.

Note that this requires a modern-ish browser that supports querySelector. This is most of them, these days, but some old browsers won't. If this is a problem, you will have to find the element using hasAttribute('selected').

create a dynamic select list with a default value in JavaScript

The issue is with

table.innerHTML += row;

this is the same as

table.innerHTML = table.innerHTML + row;

and taking the .innerHTML of an element takes only the HTML, not the currently selected values.

You can fix this by appending HTML rather than replacing the HTML, eg (as tagged jquery)


this will leave all the existing selected values as they are as they are not being replaced.

let brand = [{
"brand": "audi"
"brand": "mercedes"

$(document).ready(function() {

function createTableBody() {
//var table = document.getElementById('myTable')
var table = $("#myTable");
for (var i = 0; i < 5; i++) {
var row = `<tr>
<td><select class="brand" id="brand${i}"><option value="">brand</option></select></th>
//table.innerHTML += row
createDropdown(brand, i)

function createDropdown(data, x) {
var selectList = document.getElementById('brand' + x)
//create and insert from the option element
for (var i = 0; i < data.length; i++) {
var option = document.createElement("option")
option.value = data[i].brand
option.text = data[i].brand
selectList.value = "mercedes"
<script src=""></script>
<table id="myTable" class="table table-hover table-bordered">
<th data-column="id" data-order="desc">ID</th>
<th data-column="brand" data-order="desc">Brand</th>
<tbody id="pabBody">


How to set default value of option in HTML?

No. The only way, in HTML, to set the default option is to use the selected attribute on the option.

This avoids the need to provide id attributes for options (given that multiple options can share the same value) and it also because a select element can have multiple options selected at the same time (if the multiple attribute is set).

Set Default Value in HTML / Blazor Select (Dropdown) Foreach

If you want to be able to choose which value is selected and also get the updated value automatically, then you can use two-way binding:

<select @bind="BindString">
@foreach (var item in ValuesFromFunction)
<div>The selected value is: <b>@BindString</b></div>

@code {
string BindString { get; set; } = "Three";
List<string> ValuesFromFunction = new() { "One", "Two", "Three" };

Related Topics

Leave a reply