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

Question

我正在使用 JQuery Interdependencies 库 来构建复杂表单（当您需要根据其他字段的值来显示某些字段时）。

因此，我有一个 <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”，在那里用户可以描述他的专有标识方案。如果用户从下拉菜单中选择任何其他选项，“TypeDescription”字段将不会出现。

问题在于第一个选项。

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

当您打开页面时，默认情况下会选择“TypeDescription”字段，因此该字段始终显示。

是否有任何方法可以取消选择元素中的所有选项？我的目标是当用户打开页面时，他不应看到“TypeDescription”字段。 附带JSFiddle

- Tamara

---

你能不能在第一个选项中放置一个空的选项 <option></option>？ - j08691

试一下这个：$("#form_product_id_type").prop("selectedIndex", -1); http://jsfiddle.net/TbadA/3/ - cookie monster

@cookiemonster 是的，看起来这段代码可以满足我的需求。但是既然问题可以用纯HTML解决，我更喜欢这种方式。无论如何，谢谢你的回答 :) - Tamara

Answer 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>元素上使用"placeholder"不起作用。

- Pointy

Answer 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>

- Joe