HTML选择选项中的换行符？

Question

我可以在html选项中使用双行文本吗？怎么样？

Answer 1

我知道这是一篇较老的帖子,但是我将其留给未来的其他任何人.

您不能将换行符格式化为选项; 但是,您可以使用标题attibute来提供鼠标悬停工具提示以提供完整信息.在选项文本中使用短描述符,并在标题中给出完整的细节.

<option value="1" title="This is my lengthy explanation of what this selection really means, so since you only see 1 on the drop down list you really know that you're opting to elect me as King of Willywarts!  Always be sure to read the fine print!">1</option>

Answer 2

不,浏览器不提供此格式化选项.

你可以用一些带有<label>s的复选框和JS将它变成一个飞出菜单.

Answer 3

如何将长文本放在另一个<option>右下方并禁用它？可能是某人的解决方法,所以发布在这里.

        <select>
            <option>My real option text</option>
            <option disabled style="font-style:italic">&nbsp;&nbsp;&nbsp;(...and my really really long option text that is basically a continuation of previous option)</option> 
            <option disabled style="font-style:italic">&nbsp;&nbsp;&nbsp;(...and still continuing my previous option)</option> 
            <option>Another real option text</option>
        </select>

Answer 4

有点破解,但这会产生多行选择的效果,为你的多行输入灰色bgcolor,如果选择任何灰色文本,它会选择第一个分组.有点聪明我会说:)第一个选项还显示了如何为标题添加标题.

 function SelectFirst(SelVal) {
   var arrSelVal = SelVal.split(",")
   if (arrSelVal.length > 1) {
     Valuetoselect = arrSelVal[0];
     document.getElementById("select1").value = Valuetoselect;
   }
 }

<select name="select1" id="select1" onchange="SelectFirst(this.value)">
  <option value="1" title="this is my long title for the yes option">Yes</option>
  <option value="2">No</option>
  <option value="2,1" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is my description for the no option</option>
  <option value="2,2" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is line 2 for the no option</option>
  <option value="3">Maybe</option>
  <option value="3,1" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is my description for Maybe option</option>
  <option value="3,2" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is line 2 for the Maybe option</option>
  <option value="3,3" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is line 3 for the Maybe option</option>
</select>

Answer 5

HTML代码

<section style="background-color:rgb(237.247.249);">
    <h2>Test of select menu (SelectboxIt plugin)</h2>
    <select name="select_this" id="testselectset">
        <option value="01">Option 1</option>
        <option value="02">Option 2</option>
        <option value="03">Option 3</option>
        <option value="04">Option 4</option>
        <option value="05">Option 5</option>
        <option value="06">Option 6</option>
        <option value="07">Option 7 with a really, really long text line that we shall use in order to test the wrapping of text within an option or optgroup</option>
        <option value="08">Option 8</option>
        <option value="09">Option 9</option>
        <option value="10">Option 10</option>
    </select>
</section>

Javascript代码

$(function(){
    $("#testselectset").selectBoxIt({
        theme: "default",
        defaultText: "Make a selection...",
        autoWidth: false
    });
});

CSS代码

.selectboxit-container .selectboxit, .selectboxit-container .selectboxit-options {
    width: 400px; /* Width of the dropdown button */
    border-radius:0;
    max-height:100px;
}

.selectboxit-options .selectboxit-option .selectboxit-option-anchor {
    white-space: normal;
    min-height: 30px;
    height: auto;
}

你必须添加一些Jquery库 选择Box Jquery CSS

Jquery Ui Min JS

SelectBox Js

请检查此链接 JsFiddle Link

Answer 6

如果您使用select2，您可以轻松构建一些内容来适应下拉选项和所选选项，如下所示：

当您的文本选项被分割时|

<option value="1">Pacheco|Fmcia Pacheco|11443322551</option>

那么你的脚本可能就像这样：

<script type="text/javascript">
    function formatSearch(item) {
        var selectionText = item.text.split("|");
        var $returnString = $('<span>' + selectionText[0] + '</br><b>' + selectionText[1] + '</b></br>' + selectionText[2] +'</span>');
        return $returnString;
    };
    function formatSelected(item) {
        var selectionText = item.text.split("|");
        var $returnString = $('<span>' + selectionText[0].substring(0, 21) +'</span>');
        return $returnString;
    };
    $('.select2').select2({
        templateResult: formatSearch,
        templateSelection: formatSelected
    });
</script>

您可以在下面看到结果：