Question

I have html like this:

<select name="sortProducts" id="sortProduct" multiple="multiple">

<optgroup label="Availability">
    <option selected="selected" value="option1">Low to high</option>
    <option value="option2">High to low</option>
</optgroup>

<optgroup label="Price">
    <option value="option3">Low to high</option>
    <option value="option4">High to low</option>
</optgroup>

</select>

When I used multiple=”multiple”, It shows all of my element in combo box, so how can I hide it to show only the first choice like the single combo box?
Anyone have some idea about that? Thanks.

Answer 1

Remove the “multiple” attribute.

It looks like you need to separate the 2 categories though.

<select name="sortProductsByAvailability" id="sortProductsByAvailability">
    <option selected="selected" value="option1">Low to high</option>
    <option value="option2">High to low</option>
</select>

<select name="sortProductsByPrice" id="sortProductsByPrice">
    <option selected="selected" value="option3">Low to high</option>
    <option value="option4">High to low</option>
</select>