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

<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" };
}