如何在HTML中创建一个列表框并且不允许多选?

102

我在HTML方面的经验不是很丰富。 我想创建一个简单的列表框,但其中一个要求是禁止多选。 大部分列表框的代码都像这样 -

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

但是这样允许多选。

这里有一个类似的问题,但是“最佳”答案已被踩。所以我不确定还有其他什么方法可以实现。请帮忙。


5
对于其他新手,请避免使用上述网站,这是为了你们自己好——它们有良好的SEO,但仅此而已。这个网站充斥着糟糕的实践和习惯,你以后会很遗憾学到它们。在这种情况下,请使用MDN(Mozilla)的API,例如https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select。 - Ben
3
@Steve,感谢你的提醒。他的评论“这就是为什么我有工作”的语气也有点傲慢。如果你有工作,那很好。但这是一个回答问题而不是做广告的论坛。 - CodeBlue
3个回答

178

只需使用size属性:

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

需要澄清的是,添加size属性并没有删除多选。

单选生效是因为您去掉了multiple="multiple" 属性。

添加size="5" 属性仍然是一个好主意,它意味着至少必须显示5行。可以在此处查看完整参考here


2
支持真相。另外,当此问题先前发布时,此解决方案可能并未得到所有浏览器的广泛支持。 - aaroncatlin
它可能被downvote了,因为HTML标准中没有任何要求浏览器在设置了size属性时将其呈现为列表框。是的,所有主流浏览器目前都这样做,但不能保证它们永远都会这样做。不过从实际情况来看,这对于如此多的网站来说都是一个破坏性的变化,因此没有浏览器会改变它。 - Elezar
1
标准可以有些解释:如果选择元素具有 size 属性并且解析成功,则选择元素的显示大小是将非负整数解析规则应用于该属性的值的结果。尽管这并没有明确说明它应该显示为下拉列表框或列表框,但要显示展示多个元素的下拉列表框将会很困难。(https://html.spec.whatwg.org/#the-select-element) - aaroncatlin
谢谢!这当然可以是动态的,用Js实现:D - Jcc.Sanabria

58

2

对于Asp.Net MVC

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

或者

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接