Specify a default selected item for HTML form drop-downs

Question

Typically when you need to select an item by default, you do:

<select>
  <option value="1">                 Volvo  </option>
  <option value="2" selected="true"> Saab  </option>
  <option value="3">                 Mercedes  </option>
  <option value="4">                 Audi  </option>
</select>

Is it possible to get something like this?

<select selectedValue="2">
  <option value="1">  Volvo  </option>
  <option value="2">  Saab  </option>
  <option value="3">  Mercedes  </option>
  <option value="4">  Audi  </option>
</select>

It works out easier in PHP since you only have to soft-code one value, instead of handling the selected attribute on any possible <option/>.

The syntax for boolean attributes such as `selected` is either just `selected` or `selected="selected"`. `selected="true"` is wrong. — RoToRa, Aug 31 '10 at 11:15
@RoToRa according to the spec, the value can be anything, so `selected="true"` isn't "wrong" as such, but it does go against convention. — roryf, Aug 31 '10 at 11:21
@roryf The HTML 4.01 spec refers to http://www.w3.org/TR/html401/intro/sgmltut.html#h-3.3.4.2 which doesn't say that. — RoToRa, Aug 31 '10 at 11:26

score 8 · Answer 1 · answered Aug 31 '10 at 11:11

8

There is no attribute like that on the <select> element. Assuming your <option> output is in a loop, I don't see how it makes a huge difference:

$selected = "2";
foreach($values as $key => $val) {
    echo "<option value=\"" . $key . "\"" . ($key == $selected ? " selected=\"selected\">" : ">") . $val . "</option>";
}

(my PHP is a little rusty, that may not be 100% correct)

answered Aug 31 '10 at 11:11

roryf

29,592
16
81
103

And if you put that in a reusable function, you never have to write it again. – RoToRa Aug 31 '10 at 11:19

corroded · Answer 2 · 2010-08-31T13:13:55.530

3

No, but you can add your default value to your id like

<select id="default-value-2">

then in your options, you have

<option value="2" <?php echo is_this_the_default_value ? selected='true' : '' ?>

or something to that effect(forgive me i forgot my php syntax, but i hope you get the point).

Anyway, that is a dirty fix also, so i suggest just adding a method to check for the default selected tag and printing it selected="selected" when it is the default. You can just call it once if you loop through your select options

edited Aug 31 '10 at 13:13

answered Aug 31 '10 at 11:12

corroded

21,406
19
83
132

That won't work since it's the presence of the `selected` attribute that infers 'selectedness', irrespective of it's value. – roryf Aug 31 '10 at 11:15
oh sorry typo, you can just put the selected inside the condition then like so *see edit* – corroded Aug 31 '10 at 13:13

score 2 · Accepted Answer · edited Aug 31 '10 at 15:30

2

Put JavaScript after the declaration of the listbox and set the selected index there:

<script>
document.getElementById('listBoxId').selectedIndex=<?php echo $INDEX ?>;
</script>

Something like this.

edited Aug 31 '10 at 15:30

Robin Rodricks

110,798
141
398
607

answered Aug 31 '10 at 11:10

dmitko

2,607
2
21
15

4

Could someone seriously explain to me why using JavaScript would be a good (up-voteable) solution in this case? (The explanation "I don't care for users without JS" is **not** valid) – RoToRa Aug 31 '10 at 11:32
I'm not saying that this is an ideal solution, but it could be a good workaround. The best of course would be generating html on the server side as explained in the most popular answer. Sometimes web applications are to be used in intranets and it can be assumed that JS is on by policy. Anyway thank you for pointing out that JavaScript works only if it's enabled. – dmitko Aug 31 '10 at 13:00
1

Its the best workaround, agreed. The other solutions simply reiterate the cause of the problem as an answer, and expect me to applaud them. Absolute rubbish. – Robin Rodricks Aug 31 '10 at 15:29
@Jenko I did answer your question, the answer was no. The point I was trying to make is that if your output is in a loop, it is only defined in one place as it is, so where is the problem? – roryf Aug 31 '10 at 16:33
I can't believe someone would consider this a good, or even the best workaround, especially since a simple function such as roryf's answer would solve the problem perfectly. – RoToRa Sep 01 '10 at 12:34

score 1 · Answer 4 · edited Dec 01 '16 at 14:38

1

You can do it like this:

$value = 1;

<select>
<?php if($value==1) echo "<option selected='true'> Volvo </option>";
else echo "<option> Volvo </option>"; ?>
<?php if($value==2) echo "<option selected='true'> Saab </option>";
else echo "<option> Saab </option>"; ?>
</select>

edited Dec 01 '16 at 14:38

Xetnus

353
2
4
13

answered Mar 29 '13 at 18:04

Serendipity

65
2

score 1 · Answer 5 · answered Nov 22 '22 at 11:00

1

PHP:

<select>
    <option value="1" <?php echo ($row['status']==1) ? 'selected' : '' ?>>Permitido</option>
    <option value="2" <?php echo ($row['status']==2) ? 'selected' : '' ?>>Bloqueado</option>
</select>

answered Nov 22 '22 at 11:00

Reinaldo Moreno

11
1

score 0 · Answer 6 · answered Apr 18 '14 at 22:30

I found myself googling this to see if there was a better way to do it.

The best and cleanest answer is from @roryf, however if you are not looping through your data I thought it would be a lot cleaner to wrap it up in a function:

function set_selected($desired_value, $new_value)
{
    if($desired_value==$new_value)
    {
        echo ' selected="selected"';
    }
}

Then you would use it like this:

<?php $selected_value = 2; ?>

<select>
    <option value="1"<?php set_selected('1', $selected_value); ?>> Volvo  </option>
    <option value="2"<?php set_selected('2', $selected_value); ?>> Saab  </option>
    <option value="3"<?php set_selected('3', $selected_value); ?>> Mercedes  </option>
    <option value="4"<?php set_selected('4', $selected_value); ?>> Audi  </option>
</select>

This would set Saab as selected :)

score 0 · Answer 7 · answered Oct 16 '20 at 22:33

Preload $statusid from DB then -> (i have to escape ")

PHP:

    $option_0  = '';
    $option_11 = '';
    $option_12 = '';
    $option_13 = '';
    $option_14 = '';
    $option_15 = '';
    $option_16 = '';
    
    
    if ($statusid ==0  ){
        $option_0 = 'selected=\"\"';
    }elseif($statusid ==11 ){
        $option_11 = 'selected=\"\"';
    }elseif($statusid ==12 ){
        $option_12 = 'selected=\"\"';
    }elseif($statusid ==13 ){
        $option_13 = 'selected=\"\"';
    }elseif($statusid ==14 ){
        $option_14 = 'selected=\"\"';
    }elseif($statusid ==15 ){
        $option_15 = 'selected=\"\"';
    }elseif($statusid ==16 ){
        $option_16 = 'selected=\"\"';
    }

HTML:

    ."<select id=\"id\" name=\"name\" >"
    ."  <option {$option_0} value=\"0\">...TEXT...</option>"
    ."  <option {$option_11} value=\"11\">TEXT</option>"
    ."  <option {$option_12} value=\"12\">TEXT</option>"
    ."  <option {$option_13} value=\"13\">TEXT</option>"
    ."  <option {$option_14} value=\"14\">TEXT</option>"
    ."  <option {$option_15} value=\"15\">TEXT</option>"
    ."  <option {$option_16} value=\"16\">TEXT</option>"
    ."</select><br /><br />"

work Perfect for me.

Specify a default selected item for HTML form drop-downs

7 Answers7

Linked