HTML 选择选项中的换行符？

Question

我可以在 html 选择选项中包含两行文本吗？如何？

Answer 1

我知道这是一篇较旧的文章，但我将其留给其他将来查看的人。

您不能将换行符格式化为选项；但是，您可以使用标题属性提供鼠标悬停工具提示以提供完整信息。在选项文本中使用简短的描述符，并在标题中给出完整的内容。

<select>
  <option
    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!"
    value="1">1</option>
</select>

Answer 2

将长文本放在正下方的另一个 中并禁用它怎么样？对于在这里发帖的人来说可能是一个解决方法。

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

Answer 3

不，浏览器不提供此格式选项。

您可能可以使用一些带有 的复选框来伪造它，并使用 JS 将其变成飞出菜单。

Answer 4

有点黑客，但这给出了多行选择的效果，为多行添加灰色背景颜色，
如果您选择任何灰色文本，它将选择第一个分组。
我想说有点聪明:)
第一个选项还展示了如何为选项添加标题标签。

 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">   This is my description for the no option</option>
  <option value="2,2" style="background:#eeeeee">   This is line 2 for the no option</option>
  <option value="3">Maybe</option>
  <option value="3,1" style="background:#eeeeee">   This is my description for Maybe option</option>
  <option value="3,2" style="background:#eeeeee">   This is line 2 for the Maybe option</option>
  <option value="3,3" style="background:#eeeeee">   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 库
选择框 Jquery CSS

Jquery Ui Min JS

SelectBox Js

请检查此链接
JsFiddle 链接

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>

您可以在下面看到结果：

Answer 7

只需像这样样式选择控件即可：

<select style="height: 50px; white-space: pre-wrap;">

结果：

Answer 8

您可以使用带有列表属性的普通输入元素，然后添加带有值的选项，
该值将显示为第一行，选项文本将自动显示为第二行。我找到了这个解决方案，看看这个方法也可能有帮助

<label class="m-t-20">Customer List</label>
   <input name="customerlist" class="customerlist form-control" list="customerlists" >
   <datalist id="customerlists">
     <option value="Gerda Weijers">Aw Trucks Limited </option>
     <option value="Tracy Lolesi">Acorn Stoneworx Limited </option>
     <option value="Pacheco">Pacheco Fmcia Pacheco</option>
   </datalist>

但这仅适用于 Chrome，其他浏览器不显示值文本。

Answer 9

无法在所有浏览器上完全正常工作（hr行部分），但解决方案如下：

<select name="selector">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option disabled><hr></option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
</select>

Answer 10

相反，也许尝试用标记替换选择，例如

// Wrap any selects that should be replaced
$('select.replace').wrap('<div class="select-replacement-wrapper"></div>');

// Replace placeholder text with select's initial value
$('.select-replacement-wrapper').each(function() {
	$(this).prepend('<a>' + $('select option:selected', this).text() + '</a>');
});

// Update placeholder text with updated select value
$('select.replace').change(function(event) {
  $(this).siblings('a').text( $('option:selected', this).text() );
});

/* Position relative, so that we can overlay the hidden select */
.select-replacement-wrapper {
  position: relative;
  border: 3px solid red; /* to show area */
  width: 33%;
  margin: 0 auto;
}

/* Only shows if JS is enabled */
.select-replacement-wrapper a {
  /* display: none; */
  /* Notice that we've centered this text - 
   you can do whatever you want, mulitple lines wrap, etc, 
   since this is not a select element' */
  text-align: center;
  display: block;
  border: 1px solid blue;
}

select.replace {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  border: 1px solid green;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<select id="dropdown" class="replace">
  <option value="First">First</option>
  <option value="Second" selected>Second, and this is a long line, just to show wrapping</option>
  <option value="Third">Third</option>
</select>

Answer 11

好的，我找到了一个解决方案：

HTML：

<div class="styled-select">
    <select class="select-css">
        <option disabled selected></option>
        <option>Apples</option>
        <option>Bananas</option>
        <option>Grapes</option>
        <option>Oranges</option>
    </select>
    <span>How many kg's per week do you expect to be ordering</span>
</div>

CSS：

.styled-select select.select-css {
appearance: none;
   height: 80px;
   pointer-events:all;
   position:absolute;
   top:0;
   left:0;
}
.styled-select {
    position:relative;
    appearance: none;
    overflow: hidden;
    pointer-events:none;
   }

jQuery：

$(".select-css").on("change", function(){
    $(this).next('span').css('display', 'none');
});

Answer 12

您可以使用名为 select2 的库

您也可以查看此 Stackoverflow 问题 &答案

<select id="selectBox" style="width: 500px">
  <option value="1" data-desc="this is my <br> multiple line 1">option 1</option>
  <option value="2" data-desc="this is my <br> multiple line 2">option 2</option>
</select>

在 JavaScript 中

$(function(){
  $("#selectBox").select2({
    templateResult: formatDesc
  });

  function formatDesc (opt) {
   var optdesc = $(opt.element).attr('data-desc'); 
    var $opt = $(
      '<div><strong>' + opt.text + '</strong></div><div>' + optdesc + '</div>'
    );
    return $opt;
  };
});

Answer 13

一个想法可能是使用 optgroup。就我而言，发现它比禁用方法更好。我认为这比看到禁用选项更容易让用户感到困惑。

<select id="q1" v-model="selected" v-on:change="setCPost1(selected)">
  <option value="0"></option>
  <template
    v-for="(child, idx) in getLevel1"
    v-bind:value="child.id"      
  >

  <optgroup v-bind:value="child.id" :key="idx"
  :label="child.label"
  v-if="child.label_line_two"
  >
  </optgroup>

  <option v-bind:value="child.id" :key="idx"  v-if="!child.label_line_two"
  >
  {{ child.label }}  
  </option>

  <option v-bind:value="child.id" :key="idx" v-if="child.label_line_two"
  style="font-style:italic">
  {{ child.label_line_two }}
  </option>


  </template>
</select>

外部组件听起来很酷，比如 Vue Select，但我现在想坚持使用原生 html select。

Answer 14

是的，通过使用 css 样式
空白：预换行；
在引导程序的 .dropdown 类中覆盖它。
早些时候它是空白：nowrap；所以它使下拉菜单包装成一行。
预包裹使其根据宽度。