How to make <select> element not to choose first option as selected by default?

Question

I'm using jquery interdependencies library for building complex form (when you show fields depend on values from other fields).

So, I have <select> element

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

If user selects option "01" then I should show another field "TypeDescription" where user can describe his proprietary id scheme. If user selects any other options from select -"TypeDescription" field will not appear.

The thing is that first option

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

is always selected by default when you open a page and therefore field "TypeDescription" is shown always.

Are there any ways to unselect all options from <select> element? My goal is when user open page he should not see field "TypeDescription".

Attached JSFiddle

Answer 1

The only way to do that is to add an empty option.

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

A <select> always has something selected; if the user hasn't interacted with the control, and none of the <option> elements have the "selected" attribute, then the first one is selected.

I'm pretty sure that "placeholder" does nothing on <select> elements.

Answer 2

Add an option at the top that doesn't have a value. The placeholder attribute doesn't work for select boxes.

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