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/>.

Answer 1

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.

Answer 2

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)

Answer 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

Answer 4

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>

Answer 5

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 :)