如何在我的html文件中使用选择的jQuery？
[英]How do I use Chosen jQuery in my html file?
问题描述
How do I apply Chosen jQuery in my html page? 
如何在我的html页面中应用选择的jQuery？
I have a select form so I need to use the multiple select by Chosen to make it look more user friendly. 我有一个select表单，所以我需要使用multiple select的multiple select使其看起来更加用户友好。
<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.js in <head> : 所以，我所做的是在<head>包含chosen.jquery.min.js ：
<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. 我不知道在哪里放置JavaScript语句以调用Chosen multiple select。 I thought it was as easy as using Bootstrap, hah. 我觉得它就像使用Bootstrap一样简单，哈。 Any help? 有帮助吗？
3 个解决方案
解决方案1
18 2012-12-18 18:44:43
Your select must have the class chzn-select , and normally you would run a script after page load like the following: 你的select必须有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>
解决方案2
6 已采纳 2012-12-18 18:49:44
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.js file, you'll want to add something like: 在这个script.js文件中，你需要添加如下内容：
$(function(){
$(".chzn-select").chosen();
});
解决方案3
2 2012-12-18 18:45:44
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.