CODEWITHSUNDEEP
htmlhtml-select
simPod
simPod

Reputation: 13506

<SELECT multiple> - how to allow only one item selected?

I have a <SELECT multiple> field with multiple options and I want to allow it to have only one option selected at the same time but user can hold CTRL key and select more items at once.

Is there any way how to do it? (I don't want to remove 'multiple').

Upvotes: 155

Views: 157602

Answers (8)

DotNetFullStack
DotNetFullStack

Reputation: 41

Late to answer but might help someone else, here is how to do it without removing the 'multiple' attribute. 

$('.myDropdown').chosen({
    //Here you can change the value of the maximum allowed options
    max_selected_options: 1
});

Upvotes: -1

Ewan
Ewan

Reputation: 31

I had some dealings with the select \ multi-select this is what did the trick for me

<select name="mySelect" multiple="multiple">
    <option>Foo</option>
    <option>Bar</option>
    <option>Foo Bar</option>
    <option>Bar Foo</option>
</select>

Upvotes: 1

Marcos Placona
Marcos Placona

Reputation: 21730

Just don't make it a select multiple, but set a size to it, such as:

  <select name="user" id="userID" size="3">
    <option>John</option>
    <option>Paul</option>
    <option>Ringo</option>
    <option>George</option>
  </select>

Working example: https://jsfiddle.net/q2vo8nge/

Upvotes: 317

Ste
Ste

Reputation: 33

<select name="flowers" size="5" style="height:200px">
 <option value="1">Rose</option>
 <option value="2">Tulip</option>
</select>

This simple solution allows to obtain visually a list of options, but to be able to select only one.

Upvotes: 1

Ajay2707
Ajay2707

Reputation: 5808

I am coming here after searching google and change thing at my-end.

So I just change this sample and it will work with jquery at run-time.

$('select[name*="homepage_select"]').removeAttr('multiple')

http://jsfiddle.net/ajayendra2707/ejkxgy1p/5/

Upvotes: 0

MacGucky
MacGucky

Reputation: 2504

If the user should select only one option at once, just remove the "multiple" - make a normal select:

  <select name="mySelect" size="3">
     <option>Foo</option>
     <option>Bar</option>
     <option>Foo Bar</option>
     <option>Bar Foo</option>
  </select>

Fiddle

Upvotes: 29

Cogicero
Cogicero

Reputation: 1524

You want only one option by default, but the user can select multiple options by pressing the CTRL key. This is (already) exactly how the SELECT multiple is meant to behave.

See this: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple

Can you please clarify your question?

Upvotes: 1

David
David

Reputation: 219117

Why don't you want to remove the multiple attribute? The entire purpose of that attribute is to specify to the browser that multiple values may be selected from the given select element. If only a single value should be selected, remove the attribute and the browser will know to allow only a single selection.

Use the tools you have, that's what they're for.

Upvotes: 10

Related Questions