How to create a listbox in HTML without allowing multiple selection?

101
votes

I don't have much experience in HTML. I am looking to create a simple listbox, but one of the requirements is to DISALLOW multiple selection. Most of the code for listboxes goes like this - 

 <select name="sometext" multiple="multiple">
    <option>text1</option>
    <option>text2</option>
    <option>text3</option>
    <option>text4</option>
    <option>text5</option>
 </select>

But this allows for multiple selection.

Here, a similar question was asked, but the "best" answer has been downvoted. So I am not sure how else this could be done. Please help.

3
htmllistbox
For you other newcomers, please avoid the aforementioned website for your own good - they've got good SEO but that's about it. It's riddled with bad practices and habits you'll be sorry you learned later on. Use the API from MDN (Mozilla), in this case developer.mozilla.org/en-US/docs/Web/HTML/Element/select. - Ben
@Steve thanks for the warning. His comment "This is why I have a job" came across as arrogant too. If you have a job, good for you. This is a forum for answers and not advertisements. - CodeBlue

3 Answers

175
votes

Just use the size attribute:

<select name="sometext" size="5">
  <option>text1</option>
  <option>text2</option>
  <option>text3</option>
  <option>text4</option>
  <option>text5</option>
</select>

To clarify, adding the size attribute did not remove the multiple selection.

The single selection works because you removed the multiple="multiple" attribute.

Adding the size="5" attribute is still a good idea, it means that at least 5 lines must be displayed. See the full reference here

58
votes

Remove the multiple="multiple" attribute and add SIZE=6 with the number of elements you want

you may want to check this site

http://www.htmlcodetutorial.com/forms/_SELECT.html

2
votes

For Asp.Net MVC

@Html.ListBox("parameterName", ViewBag.ParameterValueList as MultiSelectList, 
 new { 
 @class = "chosen-select form-control"
 })

or

  @Html.ListBoxFor(model => model.parameterName,
  ViewBag.ParameterValueList as MultiSelectList,
   new{
       data_placeholder = "Select Options ",
       @class = "chosen-select form-control"
   })