Setting the selectedindex property of an HTML dropdown using PHP - php

Question

From the database I pull back the user information and based on this I can determine the correct index value using a case statement:
<?php
$genderIndex = 0;
switch ($displayProperties['gender'])
{
case "":
$genderIndex = 0;
break;
case "Male":
$genderIndex = 1;
break;
case "Female":
$genderIndex = 2;
break;
case "Other":
$genderIndex = 3;
break;
}
?>
On the form I have an HTML dropdown (select):
<select name="gender" selectedIndex="<?php echo $genderIndex; ?>">
<option value="0"> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select><br/>
The problem is it never works and always loads the page at index=0 and I made sure to verify if $genderIndex actually has the expected value (it does).
What am I doing wrong?

Answer 1

selectedindex property is not used in this way, for appropriate use of the selectedindex property you can view http://www.w3schools.com/jsref/prop_select_selectedindex.asp.
Instead what you are after is applying the "selected" attribute to the appropriate option. The code below runs some shorthand if/else checks and will apply the "selected" attribute where appropriate, based on your $genderIndex you created in your function given.
<select name="gender">
<option value="0" <?php echo ($genderIndex==0)?('selected'):(''); ?>"> </option>
<option value="Male" <?php echo ($genderIndex==1)?('selected'):(''); ?>>Male</option>
<option value="Female" <?php echo ($genderIndex==2)?('selected'):(''); ?>>Female</option>
<option value="Other" <?php echo ($genderIndex==3)?('selected'):(''); ?>>Other</option>
</select><br/>

Answer 2

The reason this is not working is because selectedIndex is not a valid attribute on the HTML <select/> element. (See http://www.w3.org/TR/html4/interact/forms.html#h-17.6)
To pre-select an option in the <select/> element (other than the first one, in this an empty value), you need to have your HTML output look something like this:
<select name="gender">
<option value="0"> </option>
<option value="Male">Male</option>
<option value="Female" selected="true">Female</option>
<option value="Other">Other</option>
</select>
Notice the addition of the selected="true" on the second <option/> tag. Something like the following will get the job done but is hardly elegant.
<select name="gender">
<?php
if(0 == $genderIndex)
echo '<option value="0" selected="true"> </option>';
else
echo '<option value="0"> </option>';
if(1 == $genderIndex)
echo '<option value="Male" selected="true">Male</option>';
else
echo '<option value="Male">Male</option>';
if(2 == $genderIndex)
echo '<option value="Female" selected="true">Female</option>';
else
echo '<option value="Female">Female</option>';
if(3 == $genderIndex)
echo '<option value="Other" selected="true">Other</option>';
else
echo '<option value="Other">Other</option>';
?>
</select>
A good web framework can be helpful here. I know that in Java, the Struts framework assists with echoing a <select/> tag to the output with the appropriate <option/> selected.

Answer 3

That's not how you specify the selected <option> in HTML. You need to have the selected attribute on the <option> itself, like so:
<select name="gender">
<option value="0"> </option>
<option value="Male" selected>Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select><br/>