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">
3
</option>
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>
</select>
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>
@endforeach
</select>
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">
Gender:
<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>
</select>
</div>
Which is a shorter way of saying
<div class="form-group">
Gender:
<select class="form-control" name="gender">
<?php
if ($user['gender'] == 'female' ) {
?>
<option value="female" selected>Female</option>
<option value="male">Male</option>
<option value="none">Prefer not to say</option>
<?php
}
if ($user['gender'] == 'male' ) {
?>
<option value="female">Female</option>
<option value="male" selected>Male</option>
<option value="none">Prefer not to say</option>
<?php
}
if ($user['gender'] == 'none') {
?>
<option value="female">Female</option>
<option value="male">Male</option>
<option value="none" selected>Prefer not to say</option>
<?php
}
?>
</select>
</div>
How to set default value for HTML select?
Note: this is JQuery. See Sébastien answer for Javascript
$(function() {
var temp="a";
$("#MySelect").val(temp);
});
<select name="MySelect" id="MySelect">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
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)
$(table).append(row);
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() {
createTableBody()
})
function createTableBody() {
//var table = document.getElementById('myTable')
var table = $("#myTable");
for (var i = 0; i < 5; i++) {
var row = `<tr>
<td>${i}</td>
<td><select class="brand" id="brand${i}"><option value="">brand</option></select></th>
</tr>`
//table.innerHTML += row
table.append(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.appendChild(option)
}
console.log(selectList)
selectList.value = "mercedes"
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-hover table-bordered">
<thead>
<tr>
<th data-column="id" data-order="desc">ID</th>
<th data-column="brand" data-order="desc">Brand</th>
</tr>
</thead>
<tbody id="pabBody">
</tbody>
</table>
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)
{
<option>@item</option>
}
</select>
<br/>
<div>The selected value is: <b>@BindString</b></div>
@code {
string BindString { get; set; } = "Three";
List<string> ValuesFromFunction = new() { "One", "Two", "Three" };
}
Related Topics
How to Make Space Between Two Buttons in Same Div
How to Remove Blue Highlight on Hover in Select, Option Inputs HTML for Chrome
How to Remove Hover Effect from Bootstrap Button
How to Type Text With Hat "^" in HTML
How to Make All Images of Different Height and Width the Same Via CSS
How to Remove Outline in Bootstrap 4
In Angular 4, How to Dynamically Set Min Date and Max Date in Date Picker
How to Avoid Decimal Values in Input Type Number
Material Design - Stepper How to Remove/Disable Steps
Using HTML Anchor Link #Id in Angular 6
Chrome User Agent Stylesheet Overwriting My Site Style
How to Save User-Entered Line Breaks from a Textarea to a Database
Does :Before Not Work on Img Elements