Question

我在设计的网站的联系表单中有以下代码：

<select id="Category" name="Category">
    <option value="0" selected="selected" disabled>Category</option>
    <option value="1">General Info</option>
    <option value="2">Booking</option>
    <option value="3">Auditions</option>
</select>

我想设置菜单，以便用户不能将category作为所选选项。有没有办法用HTML做到这一点？如果没有，我将如何使用JavaScript？

谢谢

Answer 1

当用户点击任何选项时，他无法返回第一个选项。但他可以不加改变地提交表格，然后你需要通过JS验证。

这很简单，

function validate() {
    var select = document.getElementById('Category');
    return !select.value == 0;
}

HTML中的表单：

<form onsubmit="return validate()">...</form>

Answer 2

是否会禁用精选作品？

<select id="Category" name="Category" disabled>
    <option value="0" selected="selected">Category</option>
    ...
</select>

或者可能禁用所有选定的选项对您有用（如下所示：https://stackoverflow.com/a/23428851/882073）

Answer 3

理想情况下，在生成HTML文档时，您只需从服务器端的禁用选项中删除selected属性。

否则，如果您使用的是JQuery，可以通过以下方式轻松完成：

$('#Category').find('option:not([disabled])').first().prop('selected', true);

将此添加到您的ondomready事件处理程序。这将强制为此select元素选择第一个未禁用的选项，无论其选项是什么？ selected个属性。此方法的缺点是它会阻止selected属性与select元素一起使用。

另一方面，如果您尝试在select元素中创建类别标题，则应考虑使用optgroup元素，因为这是正确的语义标记：

<select id="Category" name="Category">
    <optgroup label="Category">
        <option value="1">General Info</option>
        <option value="2">Booking</option>
        <option value="3">Auditions</option>
    </optgroup>
</select>

HTML使<option>无效

3 个答案: