如何在我的 html 文件中使用 Chosen jQuery？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13939369/
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
How do I use Chosen jQuery in my html file?
提问by emen
How do I apply Chosen jQuery in my html page?
如何在我的 html 页面中应用 Chosen jQuery？
I have a selectform so I need to use the multiple selectby Chosen to make it look more user friendly.
我有一个select表格，所以我需要使用multiple selectby Chosen 使它看起来更用户友好。
<select class="chosen" multiple="true" name="faculty">
<option value="AC">A</option>
<option value="AD">B</option>
<option value="AM">C</option>
<option value="AP">D</option>
</select>
I've downloaded the files and copied it into my webpage folder.
我已经下载了文件并将其复制到我的网页文件夹中。
So, what I did was include the chosen.jquery.min.jsin <head>:
所以，我所做的是包括chosen.jquery.min.jsin <head>：
<script type="text/javascript" src="chosen/chosen.jquery.min.js"></script>
And the instruction says to Call the chosen plugin: $(".chzn-select").chosen();
指令说要调用所选的插件： $(".chzn-select").chosen();
I don't know where to put that JavaScript statement in order to invoke Chosen multiple select. I thought it was as easy as using Bootstrap, hah. Any help?
我不知道将该 JavaScript 语句放在哪里以调用 Chosen 多选。我认为它和使用 Bootstrap 一样简单，哈哈。有什么帮助吗？
采纳答案by Ayman Safadi
If you follow one of Bootstrap's example markup structures, you'll notice that they call all their JavaScript files at the bottom (right above the </body>tag).
如果您遵循Bootstrap 的示例标记结构之一，您会注意到它们在底部（</body>标签正上方）调用了所有 JavaScript 文件。
You'll want to do the same; something like:
你也会想做同样的事情；就像是：
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/script.js"></script> <!-- Your custom JS -->
</body>
</html>
Inside this script.jsfile, you'll want to add something like:
在此script.js文件中，您需要添加如下内容：
$(function(){
$(".chzn-select").chosen();
});
回答by Anass
Your selectmust have the class chzn-select, and normally you would run a script after page load like the following:
你select必须有 class chzn-select，通常你会在页面加载后运行一个脚本，如下所示：
$(function() {
$(".chzn-select").chosen();
});
Below is a tested, working example:
下面是一个经过测试的工作示例：
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
</head>
<body>
<script type="text/javascript">
$(function() {
$(".chzn-select").chosen();
});
</script>
<select class="chzn-select" multiple="true" name="faculty" style="width:200px;">
<option value="AC">A</option>
<option value="AD">B</option>
<option value="AM">C</option>
<option value="AP">D</option>
</select>
</body>
</html>
回答by Vince Lowe
<script type="text/javascript" src="chosen/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".chzn-select").chosen();
});
</script>
<select class="chzn-select" multiple="true" name="faculty">
<option value="AC">A</option>
<option value="AD">B</option>
<option value="AM">C</option>
<option value="AP">D</option>
</select>
