CODEWITHSUNDEEP
html
AndrewB
AndrewB

Reputation: 836

Multiple Select Issue

If I have a select field as shown below, I want to prompt the user to select an option(though they are allowed select none, i.e. leaving "--Choose--" selected). However if --Choose-- is selected none of the others should be, though with this current set-up it is possible to select --Choose-- and all others.

Is there a good way to have a multiple select field where there can be none or many options selected without this discrepancy and still prompt the user for input in a similar fashion? I would prefer to avoid having to use javascript to constantly deselect/select values depending on the user's choice if possible.

html

<!DOCTYPE html>
<html>
    <body>

        <select id="desiredFruit" multiple="multiple">
            <option value="-1" selected="selected">--Choose--</option>
            <option value="1">Apple</option>
            <option value="2">Orange</option>
            <option value="3">Pear</option>
        </select>

    </body>
</html>

Upvotes: 0

Views: 49

Answers (1)

NeoTrix
NeoTrix

Reputation: 144

I think, in my opinion, that using the --Choose-- option in a multiple select box is pointless. If they can select multiple options, they can select even none, it's not like the simple select box that always an option is selected, here you can have that none of them selected on load.

You can put a simple label above the select box and just write something for a user to understand what he needs to do.

Edit: You can also use the <optgroup> tag, so you can be able to put a label above the options you want, and even group specific options under a group of items.

Like that:

<!DOCTYPE html>
<html>
    <body>
        <select id="desiredFruit" multiple="multiple">
            <optgroup label="-- Choose --">
               <option value="1">Apple</option>
               <option value="2">Orange</option>
               <option value="3">Pear</option>
            </optgroup>
        </select>

    </body>
</html>

Upvotes: 2

Related Questions