发表新帖
发表新帖

Are Multi-line Options in Html Select Tags Possible?

前端 未结
关注
7 1952
忘掉有多难
忘掉有多难 2020-12-03 17:14

Is it possible (using HTML only) to display select with options that span multiple lines each?

相关标签:
7条回答
  • 天命终不由人
    2020-12-03 17:23

    not only is it not possible on standard html, but it would then (as an object) become incompatible with the way IOS devices handle the option tag, which is to display a scroll list so it is not even reasonable to want the option tag to behave that way as it would break cross-device compatibility badly and unexpectedly.

    as others have answered (i dont have enough reputation to upvote or comment yet) have said, it must be done with css/div styling etc and in that way is a lot more extensible with full html functionality within each of the option tag's as well as (via css styling) being mobile device friendly.

    0 讨论(0)
  • 星月不相逢
    2020-12-03 17:28

    As the presentation of a select element is up to the user agent, I'm afraid you can't have that, unless some UA actually implements it. But select as either a ListBox or ComboBox never really had much need for items spanning multiple lines. Furthermore it would greatly confuse users as they are used to one line = one item.

    0 讨论(0)
  • 醉梦人生
    2020-12-03 17:32

    What about:

    <!DOCTYPE html>
<html>
<body>

<select size="13" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>

    I don't know if this is what you were looking for, but maybe it could help you.

    If you want to select multiple options, you must press Ctrl + click to select more options.

    If you want to disable multiselect, just erase the "multiple" parameter from the SELECT tag.

    0 讨论(0)
  • 温柔的废话
    2020-12-03 17:33

    It would be possible by using some JavaScript with CSS styling on HTML elements, easily done with a framework like Dojo Toolkit. Otherwise, use Radio or Checkbox controls.

    0 讨论(0)
  • 孤独总比滥情好
    2020-12-03 17:34

    It is not possible using html select control.

    You can use a div that can act as a dropdown list using JavaScript and css.

    0 讨论(0)
  • 南笙
    2020-12-03 17:36

    If your case is around iOS truncating long option text, then the solution from How to fix truncated text on <select> element on iOS7 can help.

    Add an empty optgroup at the end of the select list:

    You can implement like this:

    <select>
  <option selected="" disabled="">option first</option>
  <option>another option that is really long and will probably be truncated on a mobile device</option>
  ...
  <optgroup label=""></optgroup>
</select>
    0 讨论(0)
 看不清?
提交回复
热议问题