0

画像を含む jquery select フィールドを作成しようとしています。(どすけべ)

コンソールにエラーが表示されているため、ファイルに問題があるようです.js: Uncaught TypeError: Object [object Object] has no method 'ddslick' but in works in jsfiddle: http://jsfiddle.net/newbie123/ zUgyd/5/

jsfiddle では正しく読み込まれますが、コンソールでそのエラーが発生し、読み込まれません。

これをページのスクリプトにも入れようとしました（ワードプレスのスクリプトプラグインを使用）。これは次のとおりです。 

//Dropdown plugin data
            var ddData = [
                {
                    text: "Facebook",
                    value: "FB",
                    description: "Description with Facebook",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
                },
                {
                    text: "Twitter",
                    value: "TWT",
                    description: "Description with Twitter",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
                },
                {
                    text: "LinkedIn",
                    value: "LI",
                    description: "Description with LinkedIn",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
                },
                {
                    text: "Foursquare",
                    value: "FSQ",
                    description: "Description with Foursquare",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
                }
            ]

HTML

<form id="quote" action="" method="get"><script type="text/javascript">// <![CDATA[
$('#quote').keyup(function (){   doTotal(this);   calcMenu(this); });
// ]]></script>
<script type="text/javascript">$('#myDropdown').ddslick({
    onSelected: function(selectedData){
        //callback function: do something with selectedData;
    }   
});</script>
<div id="myDropdown">
<select id="selectMenu">
        <option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
            data-description="Description with Facebook">Facebook</option>
        <option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
            data-description="Description with Twitter">Twitter</option>
        <option value="2" selected="selected" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
            data-description="Description with LinkedIn">LinkedIn</option>
        <option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
            data-description="Description with Foursquare">Foursquare</option>
    </select>
</div>
</form>

のheader.php

  wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.ddslick.js"></script>
<!-- Make sure your CSS file is listed before jQuery -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

</head>
4

1 に答える 1