How can I set the default value for an HTML instead of setting `selected` on – Julio Spinelli Apr 02 '22 at 15:46

Question

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>

Aurelio · Answer 1 · 2017-08-17T21:58:18.760

1176

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>

edited Aug 17 '17 at 21:58

answered May 29 '15 at 09:05

Aurelio

24,702
9
60
63

120

I would think this is what most people are looking for. Good answer. – chrisallick Aug 22 '16 at 22:07
It doesn't work in my case, I want a default value to the first option. – Rama Krishna Jul 19 '21 at 11:02
Thanks for adding the available attributes. After figuring out how to solve the basic solution of this problem, you're left with the selected option being the first option, so by adding the "hidden" attribute you hide that first option – DeltaFlyer Sep 21 '21 at 07:01
this is a very good example. of course you'd need a nullable field or some form of validation – clockw0rk Feb 15 '23 at 13:43

score 292 · Answer 2 · edited Jan 09 '23 at 18:56

292

Complete example:

<select name="hall" id="hall"> 
  <option>1</option> 
  <option>2</option> 
  <option selected>3</option> 
  <option>4</option> 
  <option>5</option> 
</select>

edited Jan 09 '23 at 18:56

Chuck Le Butt

47,570
62
203
289

answered Aug 19 '10 at 01:12

D'Arcy Rittich

167,292
40
290
283

14

That's simpler than use selected="selected". – Rodrigo Jan 13 '14 at 22:44
62

selected="selected" should work for all doctypes. XHTML doesn't like attributes without values. – ps2goat Jul 24 '14 at 17:11
20

@DanielParejoMuñoz, ok, it's negligible. But if my doctype is html, and not xhtml, why waste any byte at all? – Rodrigo Feb 15 '16 at 14:18
For Sharepoint Web Parts you need to use selected="selected" – ThomasRones Jul 13 '22 at 19:32
I have a select box in angular and no matter what I do it refuses to show "choose here" in the select box. – Yannick Mussche Sep 16 '22 at 08:26

MindJuice · Answer 3 · 2016-06-22T23:37:00.547

148

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.

edited Jun 22 '16 at 23:37

answered Nov 11 '14 at 15:47

MindJuice

4,121
3
29
41

1

Very useful, turns out I was looking for this! – OrkhanGG Jan 15 '23 at 16:29
1

this one works. but requires an `onChange` method and the `` controlled, use `defaultValue` instead. Read more from https://beta.reactjs.org/reference/react-dom/components/select#props – Pratik Dev Jan 26 '23 at 19:05

score 75 · Answer 4 · edited Jul 04 '12 at 06:20

75

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>

edited Jul 04 '12 at 06:20

Jason Sturges

15,855
14
59
80

answered Jul 03 '12 at 19:39

harmender

759
5
3

42

@JRM I think what you mean is that if for your document to be XHTML compliant than an attribute must have a a value. In HTML there is no need for "selected=selected". The examples on http://www.w3.org/wiki/HTML/Elements/select, https://developer.mozilla.org/en-US/docs/HTML/Element/select do not specify a value. The important thing to note is that `selected="false"` is not allowed and `selected=""` also makes it selected. The only way to make an options not selected is to remove the attribute. http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#boolean-attributes – Ruan Mendes Jan 15 '13 at 17:39
@Juan Mendes selected set null seems also work at least by d3 style. const options = select .selectAll('option') .attr('selected',function (d) { return d===config.name?true:null; }); – Youth overturn Jun 08 '22 at 07:49

score 61 · Answer 5 · edited Oct 16 '13 at 21:01

61

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>

edited Oct 16 '13 at 21:01

zero323

322,348
103
959
935

answered Oct 16 '13 at 20:36

Florian

724
5
3

Michał Mielec · Answer 6 · 2021-02-10T10:51:47.113

Best way in my opinion:

<select>
   <option value="" selected="selected" hidden="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>

Why not disabled?

When you use disabled attribute together with <button type="reset">Reset</button> value is not reset to original placeholder. Instead browser choose first not disabled option which may cause user mistakes.

Default empty value

Every production form has validation, then empty value should not be a problem. This way we may have empty not required select.

XHTML syntax attributes

selected="selected" syntax is the only way to be compatible with both XHTML and HTML 5. It is correct XML syntax and some editors may be happy about this. It is more backward compatible. If XML compliance is important you should follow the full syntax.

score 44 · Answer 7 · answered Sep 06 '16 at 22:59

I prefer this:

<select>
   <option selected 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>

'Choose here' disappears after an option has been selected.

score 34 · Answer 8 · edited May 23 '17 at 12:34

34

An improvement for nobita's answer. Also you can improve the visual view of the drop down list, by hiding the element 'Choose here'.

<select>
  <option 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>

edited May 23 '17 at 12:34

Community

1
1

answered Jun 05 '16 at 15:54

Salitha Prasad

351
3
5

score 20 · Answer 9 · answered Sep 17 '13 at 06:37

20

Another example; using JavaScript to set a selected option.

(You could use this example to for loop an array of values into a drop down component)

<select id="yourDropDownElementId"><select/>

// Get the select element
var select = document.getElementById("yourDropDownElementId");
// Create a new option element
var el = document.createElement("option");
// Add our value to the option
el.textContent = "Example Value";
el.value = "Example Value";
// Set the option to selected
el.selected = true;
// Add the new option element to the select element
select.appendChild(el);

answered Sep 17 '13 at 06:37

Ally

2,711
1
16
17

shouldn't that be `el.selected = "selected";` to comply with the w3 standard? – 7yl4r Oct 28 '14 at 18:01
6

@7yl4r No. `selected` is a boolean property as defined by w3c - http://www.w3.org/TR/html401/interact/forms.html ` 17.6.1 Pre-selected options selected [CI] - When set, this boolean attribute specifies that this option is pre-selected.` For more information on usage see w3c schools - http://www.w3schools.com/jsref/prop_option_selected.asp – Ally Oct 31 '14 at 04:34
w3schools has no affiliation with W3C – Sean Dec 12 '21 at 17:17
It's also possible to say: ``select.value = "Example Value"``. – baz Apr 07 '22 at 20:58

score 14 · Answer 10 · answered Oct 25 '13 at 04:12

The selected attribute is a boolean attribute.

When present, it specifies that an option should be pre-selected when the page loads.

The pre-selected option will be displayed first in the drop-down list.

<select>
  <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="vw">VW</option>
 <option value="audi" selected>Audi</option> 
</select>

score 11 · Answer 11 · answered Nov 23 '17 at 08:12

11

If you are in react you can use defaultValue as attribute instead of value in the select tag.

answered Nov 23 '17 at 08:12

Johan

159
1
9

score 7 · Answer 12 · answered Nov 08 '17 at 06:48

If you are using select with angular 1, then you need to use ng-init, otherwise, second option will not be selected since, ng-model overrides the defaul selected value

<select ng-model="sortVar" ng-init='sortVar="stargazers_count"'>
  <option value="name">Name</option>
  <option selected="selected" value="stargazers_count">Stars</option>
  <option value="language">Language</option>
</select>

Ahmedakhtar11 · Answer 13 · 2018-09-04T08:08:09.587

5

I would just simply make the first select option value the default and just hide that value in the dropdown with HTML5's new "hidden" feature. Like this:

   <select name="" id="">
     <option hidden value="default">Select An Option</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
     <option value="4">Four</option>
   </select>

edited Sep 04 '18 at 08:08

answered Sep 04 '18 at 08:02

Ahmedakhtar11

1,076
11
7

score 4 · Answer 14 · answered Jun 02 '15 at 05:49

4

value attribute of tag is missing, so it doesn't show as u desired selected. By default first option show on dropdown page load, if value attribute is set on tag.... I got solved my problem this way

answered Jun 02 '15 at 05:49

X-Coder

2,632
2
19
17

score 4 · Answer 15 · edited Apr 20 '22 at 18:10

This example has been tested to work with multiple <select> elements on the page, and can also work with normal text elements. It has not been tested for setting the value to more than one selection when <select multiple="true">, however you can probably modify this sample to support that.

Add an attribute data-selected to each <select> element and set the value(s) to the value of the option you wish to have selected.
Use javascript's querySelectorAll() to select all elements that have the custom attribute you just added.

In the following example, when run, the first <select> should show option with the value user as selected, and the second <select> should show the option with the value admin as selected.

document.querySelectorAll('[data-selected]').forEach(e => {
   e.value = e.dataset.selected
});

<select data-selected="user" class="form-control" name="role">
    <option value="public">
        Pubblica
    </option>
    <option value="user">
        Utenti
    </option>
    <option value="admin">
        Admin
    </option>
</select>


<select data-selected="admin" class="form-control" name="role2">
    <option value="public">
        Pubblica
    </option>
    <option value="user">
        Utenti
    </option>
    <option value="admin">
        Admin
    </option>
</select>

score 3 · Answer 16 · answered Jan 07 '14 at 13:02

I used this php function to generate the options, and insert it into my HTML

<?php
  # code to output a set of options for a numeric drop down list
  # parameters: (start, end, step, format, default)
  function numericoptions($start, $end, $step, $formatstring, $default)
  {
    $retstring = "";
    for($i = $start; $i <= $end; $i = $i + $step)
    {
      $retstring = $retstring . '<OPTION ';
      $retstring = $retstring . 'value="' . sprintf($formatstring,$i) . '"';
      if($default == $i)
      {
        $retstring = $retstring . ' selected="selected"';
      }
      $retstring = $retstring . '>' . sprintf($formatstring,$i) . '</OPTION> ';
    }

  return $retstring;
  }

?>

And then in my webpage code I use it as below;

<select id="endmin" name="endmin">
  <?php echo numericoptions(0,55,5,'%02d',$endmin); ?>
</select>

If $endmin is created from a _POST variable every time the page is loaded (and this code is inside a form which posts) then the previously selected value is selected by default.

Julian · Answer 17 · 2018-04-12T07:34:53.287

3

This code sets the default value for the HTML select element with PHP.

<select name="hall" id="hall">
<?php
    $default = 3;
    $nr = 1;
    while($nr < 10){
        if($nr == $default){
            echo "<option selected=\"selected\">". $nr ."</option>";
        }
        else{
            echo "<option>". $nr ."</option>";
        }
        $nr++;
    }
?>
</select>

edited Apr 12 '18 at 07:34

answered Feb 20 '14 at 14:29

Julian

4,396
5
39
51

score 3 · Answer 18 · answered May 07 '18 at 16:30

3

You can use:

<option value="someValue" selected>Some Value</option>

instead of,

<option value="someValue" selected = "selected">Some Value</option>

both are equally correct.

answered May 07 '18 at 16:30

sam

1,800
1
25
47

score 3 · Answer 19 · answered Feb 12 '20 at 08:22

3

Set selected="selected" where is option value is 3

please see below example

<option selected="selected" value="3" >3</option>

answered Feb 12 '20 at 08:22

Akbor

1,280
1
9
11

score 2 · Answer 20 · edited Oct 02 '17 at 13:47

2

I myself use it

<select selected=''>
    <option value=''></option>
    <option value='1'>ccc</option>
    <option value='2'>xxx</option>
    <option value='3'>zzz</option>
    <option value='4'>aaa</option>
    <option value='5'>qqq</option>
    <option value='6'>wwww</option>
</select>

edited Oct 02 '17 at 13:47

samayo

16,163
12
91
106

answered Jul 07 '16 at 18:44

Юрий Светлов

1,622
2
23
27

score 2 · Answer 21 · answered Sep 11 '18 at 05:19

You just need to put attribute "selected" on a particular option instead direct to select element.

Here is snippet for same and multiple working example with different values.

   Select Option 3 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option>2</option>
    <option selected="selected">3</option>
    <option>4</option>
    <option>5</option>
   </select>
   
   <br/>
   <br/>
   <br/>
   Select Option 5 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option selected="selected">5</option>
   </select>
   
    <br/>
   <br/>
   <br/>
   Select Option 2 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option selected="selected">2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
   </select>

score 2 · Answer 22 · answered Apr 07 '21 at 00:16

You will need an "id" attribute in each option for this solution to work:

<script>
function select_option (id,value_selected) {

 var select; 
 select = document.getElementById(id);
 if (select == null) return 0;
 
 var option;
 option = select.options.namedItem(value_selected);
 if (option == null) return 0;

 option.selected = "selected";
 return true;
} 
</script>

<select name="hall" id="hall">
  <option id="1">1</option>
  <option id="2">2</option>
  <option id="3">3</option>
  <option id="4">4</option>
  <option id="5">5</option>
</select>
<script>select_option ("hall","3");</script>

The function first tries to find the <select> with the id, then it will search for the value_selected in the <select> options and if it finds it, it will set the selected attribute returning true. False otherwise

score 1 · Answer 23 · edited Aug 09 '18 at 00:02

The problem with <select> is, it's sometimes disconnected with the state of what's currently rendered and unless something has changed in the option list, no change value is returned. This can be a problem when trying to select the first option from a list. The following code can get the first-option the first-time selected, but onchange="changeFontSize(this)" by its self would not. There are methods described above using a dummy option to force a user to make a change value to pickup the actual first value, such as starting the list with an empty value. Note: onclick would call the function twice, the following code does not, but solves the first-time problem.

<label>Font Size</label>
<select name="fontSize" id="fontSize" onfocus="changeFontSize(this)" onchange="changeFontSize(this)">           
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
    <option value="extraLarge">Extra large</option>
</select>

<script>
function changeFontSize(x){
    body=document.getElementById('body');
    if (x.value=="extraLarge") {
        body.style.fontSize="25px";
    } else {
        body.style.fontSize=x.value;
    }
}
</script>

score 1 · Answer 24 · answered Sep 03 '19 at 16:34

I use Angular and i set the default option by

HTML Template

<select #selectConnection [(ngModel)]="selectedVal" class="form-control  col-sm-6 "  max-width="100px"   title="Select" 
      data-size="10"> 
        <option  >test1</option>
        <option >test2</option>      
      </select>

Script:

sselectedVal:any="test1";

score 1 · Answer 25 · answered Oct 27 '19 at 11:30

1

You can try like this

  <select name="hall" id="hall">
      <option>1</option>
      <option>2</option>
      <option selected="selected">3</option>
      <option>4</option>
      <option>5</option>
    </select>

answered Oct 27 '19 at 11:30

Zahidul

76
5

gom · Answer 26 · 2020-11-03T10:47:37.717

To set the default using PHP and JavaScript:

State: <select id="State">
<option value="" selected disabled hidden></option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
.
.
<option value="West Bengal">West Bengal</option>
</select>
<?php
if(isset($_GET['State'])){
    echo <<<heredoc
<script>
document.getElementById("State").querySelector('option[value="{$_GET['State']}"]').selected = true;
</script>
heredoc;
}
?>

score 1 · Answer 27 · answered Feb 25 '21 at 10:37

Default selected value is Option-4

  <html:select property="status" value="OPTION_4" styleClass="form-control">
            <html:option value="">Select</html:option>
            <html:option value="OPTION_1"  >Option-1</html:option>
            <html:option value="OPTION_2"  >Option-2</html:option>
            <html:option value="OPTION_3"  >Option-3</html:option>
            <html:option value="OPTION_4"  >Option-4</html:option>
            <html:option value="OPTION_5"  >Option-5</html:option>                                  
   </html:select>

score 1 · Answer 28 · answered May 07 '21 at 15:38

This is simple method to make default option selected.

Can be used for multiple selects on an HTML page.

The method:

Find every select
Read the id and value of that select
Make the option selected

Note:

Every select must have ID to avoid conflict

$(document).ready(function() {
  // Loop for every select in page
  $('select').each(function(index, id) {
    // Get the value 
    var theValue = $(this).attr('value');

    // Get the ID  
    var theID = $(this).attr('id');

    // Make option selected 
    $('select#' + theID + ' option[value=' + theValue + ']').attr('selected', true);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<select id="sport" name="sport" class="autoselect" value="golf">
<option value="basket">Basket Ball</option>
<option value="tennis">Tennis</option>
<option value="golf">Golf</option>
<option value="bowling">Bowling</option>
</select>

<hr>

<select id="tools" name="tools" class="autoselect" value="saw">
<option value="hammer">Hammer</option>
<option value="drill">Drill</option>
<option value="screwdriver">Screwdriver</option>
<option value="saw">Saw</option>
<option value="wrench">Wrench</option>
</select>

score 1 · Answer 29 · edited Aug 09 '21 at 00:32

I was having some troubles with it because I need some way to choose the option dynamically accordingly to the value that I have in the database. The script bellow works like a charm to me:

<?php
//pick the value of database
$selected_sexo = $query['s_sexo'];
?>

<select name="s_sexo" id="s_sexo" required>
  <option <?php if($selected_sexo == 'M'){echo("selected");}?> value="M">M</option>
  <option <?php if($selected_sexo == 'F'){echo("selected");}?> value="F">F</option>
</select>

score 0 · Answer 30 · answered Oct 19 '13 at 22:33

0

This is how I did it...

<form action="../<SamePage>/" method="post">

<?php
    if ( $_POST['drop_down'] == "")
    {
    $selected = "";
    }
    else
    {
    $selected = "selected";
    }
?>

<select name="select" size="1">

  <option value="1" <?php $selected ?>>One</option>
     ////////  OR  ////////
  <option value="2" $selected>Two</option>

</select>
</form>

answered Oct 19 '13 at 22:33

AlexM

43
1

4

There seems to be some incongruity to this solution. If the name of the element is "select", shouldn't the $_POST variable key be "select" -- where does "drop_down" come from? Also, assuming that was an error, and this is actually checking the $_POST['select'] variable for a value, any non-empty value will return true, and thus all – Ryan Nov 27 '13 at 07:17

score 0 · Answer 31 · answered Apr 19 '20 at 01:13

Upstream System:
<select name=upstream id=upstream>
<option value="SYBASE">SYBASE ASE
<option value="SYBASE_IQ">SYBASE_IQ
<option value="SQLSERVER">SQLSERVER
</select>
<script>
var obj=document.getElementById("upstream");
for (var i=0;i<obj.length;i++){if(obj.options[i].value==="SYBASE_IQ")obj.selectedIndex=i;}
</script>

Julio Spinelli · Answer 32 · 2022-04-02T22:14:07.043

none of these answer worked for me, reason is that I had an array in my database containing the previous selection and I wanted the user to see highlighted the same selections he had made the last time before changing them. I am also using React that doesn't like the selected tag.

VM71 react_devtools_backend.js:3973 Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>

Thus I decided to manipulate the docref.options directly. Inside React you have to use a useRef hook to do this, so you will see the .current property where the actual Ref is store. You get this by adding the ref= in your html line with the tag select.

Here is the useEffect code, for those not using React just get the code out of the hook, this code is executed by React every time it renders the component.

    useEffect(() => {
            if(optionRef?.current!==undefined) { // only do something when optionRef has been assigned a doc reference by React
                [...optionRef.current.options]?.filter(option => option.value === optionTypes?.filter(type => type===option.value)[0])?.map(option=> option.selected=true) 
// because optionTypes is an array of strings, due to using multiple selection, in my case only one match is possible, thus just convert the first and only string of the resulting array to string with the [0]
// this one liner is all that you need if not using react, I only tested it in React
            }
    }) // I am making it trigger every time it renders, couldn't make it work when tracking optionRef changes or optionRef.current changes, it wouldn't trigger despite the change of optionRef. To make it work I'd probable have to change a state variable every time that optionRef changes, so I decided to just execute this code for every render

HTML part inside a return in React:

<select 
    name="optionType"
    id="idNumber"
    ref={optionRef}
    multiple={true}
    size={3}
> {/* determines the number of elements that will fit into the selection window*/}
    <option value="" disabled hidden>Choose Option</option>
    <option value="Option1">Option1</option>
</select>

score -5 · Answer 33 · answered Aug 16 '21 at 13:41

-5

Select Ticket type

disabeled are not friendly in such situations

answered Aug 16 '21 at 13:41

Faisal Akram

16
2

How can I set the default value for an HTML instead of setting `selected` on – Julio Spinelli Apr 02 '22 at 15:46

Linked

Related