5

ここの デモ6を例にとりました

すべてが正常に機能しますが、ハンドラーを配置する方法がわかりません。ハンドラーはそこから値を取得します。つまり、セレクターを変更して「コンテンツ」を変更する場合です。セレクターのコードは次のとおりです。

    <select id="cd-dropdown" class="cd-select">
    <option value="-1" selected>Choose an animal</option>
    <option value="1" class="icon-monkey">Monkey</option>
    <option value="2" class="icon-bear">Bear</option>
    <option value="3" class="icon-squirrel">Squirrel</option>
    <option value="4" class="icon-elephant">Elephant</option>
    </select>

、しかし、ページ上にはすでに表示されています

 <div class="cd-dropdown">
    <span>Choose an animal</span>
    <input type="hidden" name="cd-dropdown">
    <ul>
        <li data-value="1"><span class="icon-monkey">Monkey</span></li>
        <li data-value="2"><span class="icon-bear">Bear</span></li>
        <li data-value="3"><span class="icon-squirrel">Squirrel</span></li>
        <li data-value="4"><span class="icon-elephant">Elephant</span></li>
    </ul>
   </div>

、この「変容」が起こることに気づきました

jquery.dropdown.js

id ="f1"のforma1と同様にform2cid = "f2"の2つのフォームを作成しましたが、1つのフォームは非表示になりました。選択する

onChange="a(this.value)"

、

function a(value){  
$('#f' + value).show() 
if (value == 1) 
    $('#f2').hide() 
else
    $('#f1').hide()
}

ニュートラルセレクトは機能しますが、そうではありません。コンソールブラウザが特定の値を持つ関数を呼び出す場合、たとえば： а（2）、すべての通常の出力。

したがって、イベントハンドラーを配置する場所のように、非表示フィールドの値をチェックしますか？

前もって感謝します

4

3 に答える 3

5

デモ

HTML：

<select id="cd-dropdown" class="cd-select">
    <option value="-1" selected>Choose an animal</option>
    <option value="1" class="icon-monkey">Monkey</option>
    <option value="2" class="icon-bear">Bear</option>
    <option value="3" class="icon-squirrel">Squirrel</option>
    <option value="4" class="icon-elephant">Elephant</option>
</select>

<div id="div1" class="animalDiv">MONKEY</div>
<div id="div2" class="animalDiv">BEAR</div>
<div id="div3" class="animalDiv">SQUIRREL</div>
<div id="div4" class="animalDiv">ELEPHANT</div>

CSS：

.animalDiv {
 display:none;
}

JS / jQuery：

$(function() {
    $('#cd-dropdown').dropdown({
        gutter: 5,
        stack: false,
        delay: 100,
        slidingIn: 100,
        onOptionSelect: function(e) {
            var _counter = ($(e).html()).split('data-value="')[1].split('"')[0];
            $(".animalDiv").hide();
            $("#div" + _counter).show();
        }
    });
});​

*注： jquery.dropdown.jsにも変更を加えたことに注意してください。

val !== -1 ? classes !== undefined ? optshtml += '<li><span data-value="' + val + '" class="' + classes + '">' + label + '</span></li>' : optshtml += '<li><span data-value="' + val + '">' + label + '</span></li>' : selectlabel = label;

data-valueからliへの移動span

于 2012-12-19T20:22:11.830 に答える
3

あなたが何を求めているのか正確にはわかりませんが、私はそれを突き刺すつもりです。

'オプション'の1つをクリックしてハンドラーを追加する方法を尋ねていると思います。つまり、誰かが「サル」をクリックしたときに、そのクリックを関数で処理したいということです。

プラグインソースを見ると、彼らはと呼ばれるオプションを許可していることがわかります'onOptionSelect'。このオプションに関する説明やドキュメントはありませんでしたが、ソースを見ると、これがクリックイベントのハンドラーであるように見えます。

this.opts.on( 'click.dropdown', function() {
        if( self.opened ) {
            var opt = $( this );
            self.options.onOptionSelect( opt );
            self.inputEl.val( opt.data( 'value' ) );
            self.selectlabel.html( opt.html() );
            self.close();
        }
   } );

ここでは、彼らが'onOptionSelect'関数を呼び出しており、選択した項目を唯一のパラメーターとして渡していることがわかります。したがって、スクリプトでドロップダウンを作成するときに、ハンドラーの関数を追加します。

$('#cd-dropdown').dropdown({onOptionSelect: aHandler});

function aHandler(value){  
$('#f' + value).show() 
if (value == 1) 
    $('#f2').hide() 
else
    $('#f1').hide()
}

このようにして、ハンドラーを作成し、オプションがクリックされたときにその値を使用して必要な操作を行うことができます。

代わりに、「ドロップダウン」で選択されているアイテムを特定しようとしている場合は、「cd-dropdown」という名前の「hidden」を照会する必要があります。この非表示の入力には、選択された値があります。

$('input[name="cd-dropdown"]').val() --> equals the selected value

これがお役に立てば幸いです。そのプラグインにはもう少しドキュメントが必要だと思います。

于 2012-12-19T20:23:58.513 に答える
1 
$('#cd-dropdown').dropdown({
            onOptionSelect: function (opt) {
                alert(opt.data('value'));
                return false;
            }
        });
于 2014-07-01T05:41:35.073 に答える