CODEWITHSUNDEEP
javascriptjqueryhtml
Tamara
Tamara

Reputation: 2980

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

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

Upvotes: 6

Views: 16680

Answers (4)

Ali Rad
Ali Rad

Reputation: 1

<select class="form-select" id="fldName" name="fldName" required>
     <option selected disabled>Choose one</option>
     <option value="1">a</option>
     <option value="2">b</option>
     <option value="3">c</option>
</select>

Upvotes: 0

drcrown
drcrown

Reputation: 1

To prevent the first in a element from being selected by default, you can add a placeholder option at the beginning of the list. This placeholder option should have the disabled and selected attributes, and it typically doesn't contain a valid value.

<form>
    <label for="options">Choose an option:</label>
    <select id="options" required>
        <option value="" disabled selected>Select an option</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
</form>

Upvotes: 0

Joe
Joe

Reputation: 2596

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>

Upvotes: 3

Pointy
Pointy

Reputation: 413702

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.

Upvotes: 13

Related Questions