Saturday, 16 April 2011

How to Select the first two values in a drop down menu.

Since this is my first entry I'll give a bit of background on this blog submission...

I've been trying to remove an option in a drop down menu so it's default is not 'Select' and the values of each option are not nothing.

Please see the following html which I have taken from my company website:
<tbody>
    <tr>
        <td class="column_main" align="center"><b>Size</b><br>
            <select name="select_5" onchange="showOption(document.forms['form1'], document.forms['form1'].additemID, 'select_5');" class="font_input">
                <option value="">Select</option>
                <option value="44">S</option>
                <option value="45">M</option>
                <option value="46">L</option>
                <option value="47">XL</option>
            </select>
        <br></td>
    <td class="column_main" align="center"><b>Colour</b><br>
    <select name="select_10" onchange="showOption(document.forms['form1'], document.forms['form1'].additemID, 'select_10');" class="font_input">
    <option value="">Select</option>
    <option value="527">Amazon Green</option>
    </select><br>
        </td>
    </tr>
</tbody>

Size



Colour



As you can see in the HTML above the values are equal to a number unless set to 'Select', in which case they have to value.

One way to set the default to be the first value in each drop down would be to remove the "Select" options.



I found out how to do this using the JQuery document area. http://docs.jquery.com/Main_Page


This was my code for this first method:

$('option[value=""]').remove();

This made the following occur:
 
Size


Colour



More to follow in my next blog...