HTML选择选项中的换行符？

我可以在html选择选项中使用两行文本吗？如何设置？

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

---

你可能会用一些带有

s和JS的复选框来伪装它，把它变成一个弹出菜单。

我知道这是一篇老文章，但我将把它留给将来来看的人

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

<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>

1

有点老套，但这会产生多行选择的效果，为多行添加灰色背景， 如果选择任何灰色文本，它将选择分组中的第一个。 有点聪明，我会说：） 第一个选项还显示了如何为选项添加标题标记

函数SelectFirst（SelVal）{
var arrSelVal=SelVal.split（“，”）
如果（arrSelVal.length>1）{
Valuetoselect=arrSelVal[0]；
document.getElementById（“select1”）.value=Valuetoselect；
}
}

对
不
这是我对no选项的描述
这是no选项的第2行
大概
这是我对可能选项的描述
这是Maybe选项的第2行
这是第3行的Maybe选项

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>

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

.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;
}

CSS代码

<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>

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

.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库

请检查此链接

---

将长文本放在另一个

的右下方并禁用它怎么样？可能是有人在这里发布的解决方法

我的实物期权文本
（…我的很长的选项文本基本上是前一个选项的延续）
（…并继续我以前的选择）
另一个实物期权文本

并非在所有浏览器上都能完全工作（hr行部分），但解决方案如下：

选择1
选择2
选择3

选择4
备选案文5
备选案文6

是，通过使用css样式 空白：预包装； 在引导的.dropdown类中，通过重写它。 之前是空白：nowrap；因此，它将下拉列表包装成一行。

---

预包装使其与宽度一致。

相反，可以尝试用标记替换选择，例如

//包装所有应替换的选择
$（'select.replace'）.wrap（''）；
//用select的初始值替换占位符文本
$（'.select replacement wrapper'）。每个（函数（）{
$（this）.prepend（“”+$（'select option:selected'，this）.text（）+“”）；
});
//使用更新的选择值更新占位符文本
$（'select.replace'）.change（函数（事件）{
$（this.sibbines（'a'）.text（$（'option:selected'，this.text（））；
});
/*相对定位，以便我们可以覆盖隐藏的选择*/
.选择替换包装{
位置：相对位置；
边框：3倍纯红；/*显示区域*/
宽度：33%；
保证金：0自动；
}
/*仅在启用JS时显示*/
.选择替换包装a{
/*显示：无*/
/*请注意，我们已将此文本居中-
你可以做任何你想做的事，多行包裹，等等，
因为这不是select元素的*/
文本对齐：居中；
显示：块；
边框：1px纯蓝色；
}
选择。替换{
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
边框：1px纯绿色；
不透明度：0；
}

弗斯特
第二，这是一条很长的线，只是为了显示包装
第三
如果您正在使用，您可以轻松构建符合以下要求的产品：

当文本选项被
|
Pacheco | Fmcia Pacheco | 11443322551

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

函数formatSearch（项目）{
var selectionText=item.text.split（“|”）；
变量$returnString=$（''+selectionText[0]+'
'+selectionText[1]+'
'+selectionText[2]+''）；
return$returnString；
};
已选择功能（项目）{
var selectionText=item.text.split（“|”）；
var$returnString=$（''+selectionText[0].子字符串（0,21）+''；
return$returnString；
};
$（'.select2'）。选择2({
templateResult:formatSearch，
templateSelection:formatSelected
});

结果如下所示：
好的，我找到了一个解决方案：

HTML:

jQuery：

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

您可以使用一个名为

你也可以看看这个


选择1
选择2

在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;
  };
});

$（函数（）{
$（“#选择框”）。选择2({
templateResult:formatDesc
});
函数formatDesc（opt）{
var optdesc=$（opt.element）.attr（'data-desc'）；
变量$opt=$(
“”+opt.text+”“+optdesc+”
);
返回$opt；
};
});
一个想法是使用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>


{{child.label}
{{child.label_line_two}

外部组件听起来很像Vue Select，但我现在想继续使用原生html Select。
您可以使用带有列表属性的普通输入元素，然后添加带值的选项，
值将显示为第一行，选项文本将自动显示为第二行。我找到了这个解决方案，看一看，这种方式可能也有帮助


客户列表
Aw卡车有限公司
橡实石斛有限公司
帕切科Fmcia帕切科
只需样式如下选择控件：

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



结果:

太棒了，我搜索了很长时间，它在Chrome和Safari上不起作用。我只能在Firefox上使用它。在iOS/Android上看起来没有那么好，但确实很聪明！（米格