blocks|key|196949|text|您的select必须具有类chzn-select，通常您将在页面加载后运行一个脚本，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|196950|$(function()+{
++++$(".chzn-select").chosen();
});|code-block|syntax|javascript|196951|下面是一个经过测试的工作示例：|196952|<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>|196953|entityMap^0|2|6|D|B|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>Your <code>select</code> must have the class <code>chzn-select</code>, and normally you would run a script after page load like the following:</p>

<pre><code>$(function() {
    $(".chzn-select").chosen();
});
</code></pre>

<p>Below is a tested, working example:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"&gt;
&lt;script src="http://code.jquery.com/jquery-1.8.3.js"&gt;&lt;/script&gt;
&lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;script type="text/javascript"&gt;
$(function() {
    $(".chzn-select").chosen();
});
&lt;/script&gt;

&lt;select class="chzn-select" multiple="true" name="faculty" style="width:200px;"&gt;
        &lt;option value="AC"&gt;A&lt;/option&gt;
        &lt;option value="AD"&gt;B&lt;/option&gt;
        &lt;option value="AM"&gt;C&lt;/option&gt;
        &lt;option value="AP"&gt;D&lt;/option&gt;
&lt;/select&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|196985|text|<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|196986|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;script type="text/javascript" src="chosen/chosen.jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function(){
    $(".chzn-select").chosen();
});
&lt;/script&gt;

&lt;select class="chzn-select" multiple="true" name="faculty"&gt;
        &lt;option value="AC"&gt;A&lt;/option&gt;
        &lt;option value="AD"&gt;B&lt;/option&gt;
        &lt;option value="AM"&gt;C&lt;/option&gt;
        &lt;option value="AP"&gt;D&lt;/option&gt;
&lt;/select&gt;
</code></pre>


blocks|key|197009|text|如果你关注一个Bootstrap's+example+markup+structures，你会注意到他们在底部调用所有的JavaScript文件(就在</body>标签的上方)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|197010|你会想要做同样的事情；类似于：|197011|++++</div>+

++++
++++
++++<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>+++++

++</body>
</html>|code-block|syntax|javascript|197012|在这个script.js文件中，您需要添加如下内容：|197013|$(function(){
++++$(".chzn-select").chosen();
});|197014|entityMap|0|LINK|mutability|MUTABLE|url|http://twitter.github.com/bootstrap/getting-started.html#examples^0|23|7|7|11|0|0|0|0|3|9|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>If you follow one of <a href="http://twitter.github.com/bootstrap/getting-started.html#examples" rel="noreferrer">Bootstrap's example markup structures</a>, you'll notice that they call all their JavaScript files at the bottom (right above the <code>&lt;/body&gt;</code> tag).</p>

<p>You'll want to do the same; something like:</p>

<pre><code>    &lt;/div&gt; &lt;!-- /container --&gt;

    &lt;!-- Le javascript
    ================================================== --&gt;
    &lt;!-- Placed at the end of the document so the pages load faster --&gt;
    &lt;script src="../assets/js/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="../assets/js/bootstrap-transition.js"&gt;&lt;/script&gt;
    &lt;script src="../assets/js/bootstrap-alert.js"&gt;&lt;/script&gt;
    &lt;script src="../assets/js/script.js"&gt;&lt;/script&gt;     &lt;!-- Your custom JS --&gt;

  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Inside this <code>script.js</code> file, you'll want to add something like:</p>

<pre><code>$(function(){
    $(".chzn-select").chosen();
});
</code></pre>


<p>How do I apply Chosen jQuery in my html page?</p>

<p>I have a <code>select</code> form so I need to use the <code>multiple select</code> by Chosen to make it look more user friendly.</p>

<pre><code>&lt;select class="chosen" multiple="true" name="faculty"&gt;
        &lt;option value="AC"&gt;A&lt;/option&gt;
        &lt;option value="AD"&gt;B&lt;/option&gt;
        &lt;option value="AM"&gt;C&lt;/option&gt;
        &lt;option value="AP"&gt;D&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>I've downloaded the files and copied it into my webpage folder.</p>

<p>So, what I did was include the <code>chosen.jquery.min.js</code> in <code>&lt;head&gt;</code>:</p>

<pre><code>&lt;script type="text/javascript" src="chosen/chosen.jquery.min.js"&gt;&lt;/script&gt;
</code></pre>

<p>And the instruction says to Call the chosen plugin: <code>$(".chzn-select").chosen();</code></p>

<p>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? </p>


How do I use Chosen jQuery in my html file?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何在html页面中应用所选的jQuery？我有一个select表单，所以我需要使用multiple select by friendly来使它看起来更用户友好。<select class="chosen" multiple="true" name="faculty">        <option value="AC...

问如何在html文件中使用选定的jQuery？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html文件中使用选定的jQuery？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html文件中使用选定的jQuery？
EN