拒绝下拉菜单的第一个选项

Question

How can I dissalow the first option of the following drop down menu (when "Go" is clicked, nothing should happen):

HTML :

<form name="form_name">
    <select name="ddmenu_name">
        <option>1st option (should do nothing)</option>
        <option value="link 1">link 1 name</option>
        <option value="link 2">link 2 name</option>
        <option value="link 3">link 3 name</option>
        <option value="link 4">link 4 name</option>
        <input type="button" name="Submit" value="Go" onClick="window.open(ddmenu_name.value,'newtab')">
    </select>
</form>

Thank you!

Answer 1

If the purpose of the first option is to provide a header, use an optgroup :

<select name="ddmenu_name"> 
    <optgroup label="1st option (should do nothing)">
        <option value="link 1">link 1 name</option> 
        <option value="link 2">link 2 name</option> 
        <option value="link 3">link 3 name</option> 
        <option value="link 4">link 4 name</option>
    </optgroup> 
</select>

Works in all major (old and new) browsers. Doesn't require JavaScript.

If that wasn't the intention you could do something like this:

var previous;
$('#ddmenu_id').on('change', function() {
    if ($(this).val() === 'noselect') {
        $(this).val(previous);
    }
    else {
        previous = $(this).val();
    }
});

With HTML:

<select name="ddmenu_name" id="ddmenu_id"> 
<option value="noselect">1st option (should do nothing)</option> 
<option value="link 1">link 1 name</option> 
<option value="link 2">link 2 name</option> 
<option value="link 3">link 3 name</option> 
<option value="link 4">link 4 name</option> 
</select>
<input type="button" name="Submit" value="Go" onClick="window.open(ddmenu_name.value,'newtab')"> 

You can see it in action here .