Question

I have the following code ;

              <label for="courseLevel">Level</label>
              <select name="courseLevel" id="courseLevel">
                <option label="courseLevel">Foundation</option>
                <option label="courseLevel">Undergraduate</option>
                <option label="courseLevel">Postgraduate</option>
              </select>

In firefox and chrome i get “Foundation”,”Undergraduate”,”Postgraduate” as the options. In internet explorer i get “courseLevel”,”courseLevel”,”courseLevel”. Why? and how can it be fixed?

Answer 1

label is not being used correctly (only IE 7+ and Opera support it). You don’t need it.

<label for="courseLevel">Level</label>
<select name="courseLevel" id="courseLevel">
    <option>Foundation</option>
    <option>Undergraduate</option>
    <option>Postgraduate</option>
</select>

What you are probably looking for is value. For example, you could assign numeric values to each of the options like so:

<label for="courseLevel">Level</label>
<select name="courseLevel" id="courseLevel">
    <option value='0'>Foundation</option>
    <option value='1'>Undergraduate</option>
    <option value='2'>Postgraduate</option>
</select>

However, you don’t need them. When no values are specified, the text between <option> and </option> will be used.