javascript 带有复选框和搜索方法的多选下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28414109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multi select dropdown with checkbox & search method
提问by benskiiii
is there any plugin that can do this?
有没有插件可以做到这一点？
I have a Spring MVC project, so it needs to be in html/JavaScript/java something..
我有一个 Spring MVC 项目，所以它需要在 html/JavaScript/java 中。
Something like this: http://harvesthq.github.io/chosen/, the second one (Multiple Select), but it doesn't have checkboxes. Also a good thing would be to have select all option on top of it, but that's optional. So in short: -Search -Multi checkbox for multiple choices
像这样：http: //harvesthq.github.io/chosen/，第二个（多选），但它没有复选框。还有一件好事是在它上面选择所有选项，但这是可选的。简而言之：-Search -Multi 复选框用于多项选择
Thanks in forehand.
正手道谢。
采纳答案by Dustin
This isn't really related to Spring directly. It's more of a HTML/JS (front-end) issue. If you like the way that the select box works on the link you provided, and it fits the scope of your project, then there's a few steps you'd want to take:
这与 Spring 并没有直接关系。这更像是一个 HTML/JS（前端）问题。如果您喜欢选择框在您提供的链接上的工作方式，并且它适合您的项目范围，那么您需要采取以下几个步骤：
- Render the select box as normal with whichever HTML templating framework you are using with Spring (whether Themeleaf, JSP, Handlebars, or something else). Make sure there is a
multipleattribute in theselecttag. - Download and add the jQueryJavaScript library to this page (required for the "plugin" in the link).
- Download and add the Chosen file from your link to your page afterjQuery.
- Activate the plugin as described.
- 使用您在 Spring 中使用的任何 HTML 模板框架（无论是 Themeleaf、JSP、Handlebars 还是其他东西），照常渲染选择框。确保标签中有一个
multiple属性select。 - 下载jQueryJavaScript 库并将其添加到此页面（链接中的“插件”需要）。
- 下载jQuery后，从链接中选择的文件并将其添加到您的页面。
- 按照描述激活插件。
Here's a brief skeleton of how I would do it (as rendered HTML, not the template; which depends on implementation):
这是我将如何做的简要骨架（作为呈现的 HTML，而不是模板；这取决于实现）：
<html>
<head>
</head>
<body>
<select class="chosen-select" multiple>
<option value="1">Option 1</option>
<option value="2">Value 2</option>
</select>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="/path/to/resources/chosen.jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".chosen-select").chosen();
});
</script>
</body>
</html>
I would definitely recommend reading into jQuery and JavaScript in general on top of all of this. I hope this helps get you rolling!
我绝对会建议在所有这些之上阅读 jQuery 和 JavaScript。我希望这有助于让你滚动！
