148

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').

2
  • 8
    @GordonM yeah totally :P I was looking for the same today because I wanted multiple items to show (which is implied with the multiple attribute) without actually being able to select multiple. Forgot that the attribute to do this was called size, so the top answer served me well :)
    – Luc
    May 16, 2013 at 13:28
  • I personally have a select multiple field where I have four options and I want three of the options to be able to be selected but the fourth one needs to be alone if selected because it would clash with the other three (3 options and a "none")
    – user3915050
    Oct 15, 2015 at 22:06

8 Answers 8

311

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/

3
  • Is it possible to programmatically count total number of <option> in size attribute?
    – MyName
    Apr 6, 2017 at 15:25
  • 1
    @Natasha You can get the value of the size field using jquery :-) Apr 28, 2017 at 11:53
  • 1
    Size relevant info: Placing the select inside a display: flex container, and do flex-grow: 1 on the select will cause it to treat size="3" as a minimum height, and then snap the height of the whole select to the maximum size possible within your container. jsfiddle.net/z1gypahs
    – Torxed
    Nov 16, 2019 at 23:53
29

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

10

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.

2
  • 2
    ah. the size attribute works also standalone. didn't noticed. thanks
    – simPod
    Mar 17, 2011 at 20:48
  • 7
    @simPod the reasoning being because there are times where clients need to see all the options in front of them, but can only choose 1 of them. It's been so long since I've written "real" html, that I had to google/bing the answer... Oh thank heaven for StackOverflow some days.
    – Richard B
    Jan 27, 2012 at 1:11
1

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?

2
  • Awww I understand the question now, thanks to Marcos Placona. Initial question wasn't well worded.
    – Cogicero
    Mar 17, 2011 at 11:23
  • Although I personally think it is "unfair" to the user's experience when you show multiple select options but the user can only select one.
    – Cogicero
    Mar 17, 2011 at 11:24
1
<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.

1
  • 4
    Welcome to SO. Please add verbose description May 13, 2016 at 15:26
1

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>
0

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/

1
  • 4
    You're basically doing what the accepted answer is doing, but in a convoluted way. Instead of removing the multiple attribute at run-time, you can just directly remove it in the HTML. jsfiddle.net/3rkk6m9a
    – Harry
    Jun 19, 2015 at 11:43
-1

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
});
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.