Tuesday, September 30, 2014

How To Show Select Box as Multiple, But Disable Multiple Selection?

I needed to display:
A html <select> box as a multiple enabled or vertically expanded box (not as dropdown list). So I set select box as multiple. Then it turn outs to be like this:
<select id="myName" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

Problem
But how to disable multiple selection? (i.e. to allow only 1 selection)

Solution
Do not use the multiple attribute instead set the size for it. It will enable you to select just one option in the list. And it displays as multiple select or expanded box.
<select id="myName" size="3">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
The size attribute specifies the number of visible options in a drop-down list. If the value of the size attribute is greater than 1, but lower than the total number of options in the list, the browser will add a scroll bar to indicate that there are more options to view.

Note: If you put multiple then user can select multiple items from the list.

source: http://stackoverflow.com/a/14155833

No comments:

Post a Comment