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

Question

我使用jquery相互依赖库构建复杂表单(当您显示字段依赖于其他字段的值时)。

所以，我有<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方案。如果用户从select -"TypeDescription“字段中选择任何其他选项，则不会出现。

问题是第一个选择

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

默认情况下，打开页面时总是选中"TypeDescription“字段。

是否有任何方式取消从<select>元素中选择所有选项？我的目标是当用户打开页面时，他不应该看到字段"TypeDescription“。

附加JSFiddle

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>元素没有任何作用。

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>