Select first dropdown item automatically

Question

I am trying to select the first value of the dropdown automatically. Its not picking up automatically.

My code

$("option").val($(".select2-billing_state-container").val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="billing_state" id="billing_state" class="state_select select2-hidden-accessible" autocomplete="address-level1" data-placeholder="Type the name of your state / county / province / emirate here." tabindex="-1" aria-hidden="true">
  <option value="">Select an option…</option>
  <option value="OM1">Ad Dakhiliyah</option>
  <option value="OM2">Ad Dhahirah</option>
  <option value="OM3">Al Batinah North</option>
  <option value="OM4">Al Batinah South</option>
  <option value="OM5">Al Buraimi</option>
  <option value="OM6">Al Wusta</option>
  <option value="OM7">Ash Sharqiyah North</option>
  <option value="OM8">Ash Sharqiyah South</option>
  <option value="OM9">Dhofar</option><option value="OM10">Muscat</option>
  <option value="OM11">Musandam</option>
</select>

Your code does not seem to mean what you say. Perhaps you mean `$("#billing_state").val($(".select2-billing_state-container").val())` assuming `$(".select2-billing_state-container")` is a form field with a value - in any case `$("option")` is NOT what you want — mplungjan, Feb 26 '18 at 12:36
@connexo: This is a sample from a PHP code that is generating it. I have multiple selections depending what country is selected. — , Feb 26 '18 at 12:40
https://jsfiddle.net/nav2222/3o6eskLv/3/ Check with this fiddle — Naveen Kumar, Feb 26 '18 at 12:59

SShah · Answer 1 · 2018-04-15T20:38:58.437

In order to have an option pre selected automatically, simply add the attribute "selected" to the corresponding option.

So for your code:

all you need to do is add selected to first option:

<option value="OM1" **selected**>Ad Dakhiliyah</option>

The option with the selected attribute, will get pre-selected when the form is loaded for the first time.

The code should look like the following:

<select name="billing_state" id="billing_state" class="state_select select2-hidden-accessible" autocomplete="address-level1" data-placeholder="Type the name of your state / county / province / emirate here." tabindex="-1" aria-hidden="true">
    <option value="">Select an option…</option>
    <option value="OM1" selected>Ad Dakhiliyah</option>
    <option value="OM2">Ad Dhahirah</option>
    <option value="OM3">Al Batinah North</option>
    <option value="OM4">Al Batinah South</option>
    <option value="OM5">Al Buraimi</option>
    <option value="OM6">Al Wusta</option>
    <option value="OM7">Ash Sharqiyah North</option>
    <option value="OM8">Ash Sharqiyah South</option>
    <option value="OM9">Dhofar</option>
    <option value="OM10">Muscat</option>
    <option value="OM11">Musandam</option>
</select>

Note: You may no longer require 'Select an option…', as the first option will automatically be pre-selected.

Select first dropdown item automatically

1 Answers1