HTML:选择多个项目下拉

Question

我在这里发现了以下代码堆栈溢出

$(".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>

在这个问题中:HTML: Select multiple as下拉菜单

但是我的实现不工作。

我复制了上面的代码(没有第一部分$)并将其粘贴(没有修改)到我的.php页面中。然后我试着运行代码，但我的输出看起来像这样。

我的输出在代码片段中，除了这三个库之外，我没有包括任何其他库或其他代码。我该怎么做才能使它起作用呢?

Answer 1

你只需要添加属性multiple

选择列表 下面是示例代码:

<select multiple id="select">
<option>Opt. 1</option>
<option>Opt. 2</option>
<option>Opt. 3</option>
</select>

Answer 2

在加载库文件之前，您似乎运行了这个函数$(".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>
<script>
$(document).ready(function() {   
$(".chosen-select").chosen({
no_results_text: "Oops, nothing found!"
})
});
</script>

Answer 3

所以为了解决这个问题，我不得不添加

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

放入脚本标签，现在它开始工作了。(我之前忽略了它，认为它在某种意义上没有影响工作/不工作)