如何使 <select> 元素默认不选择第一个选项？答案

【问题标题】：How to make <select> element not to choose first option as selected by default?如何使 <select> 元素默认不选择第一个选项？
【发布时间】：2014-06-20 17:13:11
【问题描述】：

我正在使用jquery interdependencies library 构建复杂的表单（当您显示的字段取决于其他字段的值时）。

所以，我有<select> 元素

<select placeholder="Select Product ID Type" id="form_product_id_type" name="form_product_id_type">
    <option label="01 - Proprietary" value="01">01 - Proprietary</option>
    <option label="02 - ISBN-10" value="02">02 - ISBN-10</option>
    <option label="03 - GTIN-13" value="03">03 - GTIN-13</option>
    <option label="04 - UPC" value="04">04 - UPC</option>
    <option label="05 - ISMN-10" value="05">05 - ISMN-10</option>
    ...
</select>

如果用户选择选项“01”，那么我应该显示另一个字段“TypeDescription”，用户可以在其中描述他的专有 id 方案。如果用户从选择中选择任何其他选项 - “TypeDescription”字段将不会出现。

问题是第一个选项

<option label="01 - Proprietary" value="01">01 - Proprietary</option>

在您打开页面时始终默认选中，因此始终显示字段“TypeDescription”。

有什么方法可以取消选择<select> 元素中的所有选项？我的目标是当用户打开页面时，他不应该看到“TypeDescription”字段。

附JSFiddle

【问题讨论】：

你不能先放一个空选项<option></option>吗？
试试这个：$("#form_product_id_type").prop("selectedIndex", -1);jsfiddle.net/TbadA/3
@cookiemonster 是的，看起来这段代码可以满足我的需要。但是由于可以使用纯 html 解决问题，因此我更喜欢这种方式。无论如何，谢谢你的回答:)

标签： javascript jquery html

【解决方案1】：

这样做的唯一方法是添加一个空选项。

<select placeholder="Select Product ID Type" id="form_product_id_type" name="form_product_id_type">
    <option selected value="">Select Product ID Type</option>
    <option label="01 - Proprietary" value="01">01 - Proprietary</option>
    <option label="02 - ISBN-10" value="02">02 - ISBN-10</option>
    <option label="03 - GTIN-13" value="03">03 - GTIN-13</option>
    <option label="04 - UPC" value="04">04 - UPC</option>
    <option label="05 - ISMN-10" value="05">05 - ISMN-10</option>
    ...
</select>

<select> 总是选择一些东西；如果用户没有与控件进行交互，并且<option> 元素都没有“selected”属性，则选择第一个。

我很确定“占位符”对 <select> 元素没有任何作用。

【讨论】：

【解决方案2】：

在顶部添加一个没有值的选项。 placeholder 属性不适用于选择框。

<select id="form_product_id_type" name="form_product_id_type">
    <option value="">Select Product ID</option>
    <option label="01 - Proprietary" value="01">01 - Proprietary</option>
    <option label="02 - ISBN-10" value="02">02 - ISBN-10</option>
    <option label="03 - GTIN-13" value="03">03 - GTIN-13</option>
    <option label="04 - UPC" value="04">04 - UPC</option>
    <option label="05 - ISMN-10" value="05">05 - ISMN-10</option>
    ...
</select>

【讨论】：