Question

如何禁止以下下拉菜单中的第一个选项（点击“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>

谢谢！

Answer 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中看到它。

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

1 个答案: