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

时间:2012-01-24 16:04:50

标签: javascript html menu

如何禁止以下下拉菜单中的第一个选项(点击“Go”时,不会发生任何事情):

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>

谢谢!

1 个答案:

答案 0 :(得分:1)

如果第一个选项的目的是提供标题,请使用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>

适用于所有主要(新旧)浏览器。不需要JavaScript。

如果这不是你的意图,你可以这样做:

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

使用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')"> 

您可以在行动here中看到它。