0

Chosen プラグイン ( http://harvesthq.github.io/chosen/ ) が機能しない理由を見つけるために、私は髪をかきむしっています。以下のようにJavaScriptではなく、選択したプラグインをjQueryで直接呼び出すなど、さまざまなことを試しましたが、どれも機能しません。ライブラリとスタイルシートを正しく呼び出したと思いますが、プラグインの機能はどれも選択ボックスに適用されません。それはおそらく私がどこかで犯した単純な間違いです。

これは私のマークアップです。最初にスタイルシートを呼び出します。echo $page_htmlheadGoogle API から最新の jQuery などの JavaScript ライブラリを呼び出します。

<head>

    <!--[if lt IE 9]>
    <script src="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/scripts/js/html5shiv.js"></script>
    <![endif]-->

    <title>flyeuro.com</title>  

    <meta http-equiv="X-UA-Compatible" content="IE=7"></meta>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="description" content="Europe's favourite virtual airline!">

    <link rel="shortcut icon" type="image/x-icon" href="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/img/favicon.ico">
    <link rel="stylesheet" media="all" type="text/css" href="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/css/style.css" />
    <link rel="stylesheet" media="all" type="text/css" href="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/scripts/js/main/chosen/chosen.css" />

    <?php 
    /* This is required, so phpVMS can output the necessary libraries it needs */
    echo $page_htmlhead; 
    ?>

    <script type="text/javascript" src="<?php echo SITE_URL?>/lib/skins/flyeuro_V2/scripts/js/main/chosen/chosen.jquery.js"> </script>

    <script type="text/javascript">
    $(document).ready(function() {
        $(".chosen-select").chosen()
    });
    </script>

     // ...rest of <head> code

</head>

内部$page_htmlhead...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

最後に、ユーザーのオプションをフォームに表示します...

<select class="chosen-select" name="depicao" data-placeholder="Departure Airport">
    <option value="">All</option>

        <?php

        foreach ($airports as $airport)
        {
            echo '<option value="'.$airport->icao.'">'.$airport->icao.' - '.$airport->name.'</option>';
        }

        ?>

</select>
4

0 に答える 0