18

自分の HTML ページに Chosen jQuery を適用するにはどうすればよいですか?

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>

ファイルをダウンロードして、Web ページ フォルダーにコピーしました。

だから、私がしたことはchosen.jquery.min.jsinを含めることでした<head>:

<script type="text/javascript" src="chosen/chosen.jquery.min.js"></script>

指示には、選択したプラグインを呼び出すように指示されています。$(".chzn-select").chosen();

Chosen の複数選択を呼び出すために、その JavaScript ステートメントをどこに配置すればよいかわかりません。Bootstrap を使うのと同じくらい簡単だと思いました。何か助けはありますか？

4

3 に答える 3

20

classselectが必要chzn-selectです。通常は、ページの読み込み後に次のようなスクリプトを実行します。

$(function() {
    $(".chzn-select").chosen();
});

以下は、テスト済みの実際の例です。

<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>
于 2012-12-18T18:44:43.287 に答える
7

Bootstrap のサンプル マークアップ構造の1 つに従うと、すべての JavaScript ファイルが一番下 (</body>タグのすぐ上) で呼び出されていることがわかります。

同じことをしたくなるでしょう。何かのようなもの：

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

このscript.jsファイル内に、次のようなものを追加します。

$(function(){
    $(".chzn-select").chosen();
});
于 2012-12-18T18:49:44.583 に答える
4 
<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>
于 2012-12-18T18:45:44.970 に答える