HTML:选择多个作为下拉列表

Question

我想使用一个select带有multiple常见下拉字段的字段size=1:

<select name="test[]" size="1" multiple>
    <option>123
    <option>456
    <option>789
</select>

为什么这段代码不显示下拉列表的箭头？

谢谢!

Answer 1

这里也提出了类似的问题

如果您能够在项目中添加外部库,则可以尝试选择

这是一个示例:

$(".chosen-select").chosen({
  no_results_text: "Oops, nothing found!"
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>

<form action="http://httpbin.org/post" method="post">
  <select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test">
    <option value=""></option>
    <option>American Black Bear</option>
    <option>Asiatic Black Bear</option>
    <option>Brown Bear</option>
    <option>Giant Panda</option>
    <option>Sloth Bear</option>
    <option>Sun Bear</option>
    <option>Polar Bear</option>
    <option>Spectacled Bear</option>
  </select>
  <input type="submit">
</form>

我遇到的一件事是,你必须在包含选择之前包含JQuery,否则你会得到错误.

Answer 2

这是的文档<select>。您正在使用 2 个属性：

multiple
此布尔属性表示可以在列表中选择多个选项。如果未指定，则一次只能选择一个选项。当指定 multiple 时，大多数浏览器将显示滚动列表框而不是单行下拉列表。

size
如果控件显示为滚动列表框（例如，指定了 multiple 时），则此属性表示列表中应同时可见的行数。浏览器不需要将选择元素呈现为滚动列表框。默认值为 0。

如文档中所述。<select size="1" multiple>将渲染一个列表框，只有1 行可见和一个滚动条。因此，您将失去带有该属性的下拉菜单/箭头multiple。

Answer 3

因为你正在使用多个。尽管它在技术上仍然是一个下拉菜单，但它看起来或行为不像标准下拉菜单。相反，它会填充一个列表框并让他们选择多个选项。

大小决定了在必须向下或向上单击以查看其他选项之前出现的选项数量。

我有一种感觉，只有使用 JavaScript 插件才能实现您想要实现的目标。

一些例子：

jQuery 多选下拉菜单

http://labs.abeautifulsite.net/archived/jquery-multiSelect/demo/

Answer 4

您可能需要一些插件，例如Jquery 多选下拉列表。

您还需要像这样关闭选项标签：

<select name="test" multiple>
    <option>123</option>
    <option>456</option>
    <option>789</option>
</select>

JSFiddle演示

Answer 5

选择大小为1的多项选择是非常不切实际的。我在这里做了一个小提琴：https : //jsfiddle.net/wqd0yd5m/2/

<select name="test" multiple>
    <option>123</option>
    <option>456</option>
    <option>789</option>
</select>

尝试探索其他选项，例如使用复选框来实现您的目标。

Answer 6

多选

$(document).ready(function(){
    
     var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
        removeItemButton: true,
        maxItemCount:5,
        searchResultLimit:5,
        renderChoiceLimit:5
      }); 
     
     
 });

.mt-100{margin-top: 100px}body{background: #00B4DB;background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);background: linear-gradient(to right, #0083B0, #00B4DB);color: #514B64;min-height: 100vh}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.css">
<script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.js"></script>
<div class="row d-flex justify-content-center mt-100">
    <div class="col-md-6"> <select id="choices-multiple-remove-button" placeholder="Select upto 5 tags" multiple>
            <option value="HTML">HTML</option>
            <option value="Jquery">Jquery</option>
            <option value="CSS">CSS</option>
            <option value="Bootstrap 3">Bootstrap 3</option>
            <option value="Bootstrap 4">Bootstrap 4</option>
            <option value="Java">Java</option>
            <option value="Javascript">Javascript</option>
            <option value="Angular">Angular</option>
            <option value="Python">Python</option>
            <option value="Hybris">Hybris</option>
            <option value="SQL">SQL</option>
            <option value="NOSQL">NOSQL</option>
            <option value="NodeJS">NodeJS</option>
        </select> </div>
</div>

下拉式菜单

尝试这个真实的例子 - https://bbbootstrap.com/snippets/multiselect-dropdown-list-83601849