web-dev-qa-db-ja.com

セマンティックUIドロップダウン変更ハンドラー

セマンティックUIを使用した次のドロップダウンがあります。

<div class="ui selection dropdown select-language">
    <input name="language" type="hidden" value="fr-FR">
    <div class="text">French</div>
    <i class="dropdown icon"></i>
    <div class="menu ui transition hidden">
        <div class="item" data-value="en-US">English</div>
        <div class="item active" data-value="fr-FR">French</div>
    </div>
</div>

そして、jQuery側でそれを初期化します。

$(".select-language").dropdown()

changeハンドラーを追加するにはどうすればよいですか？

documentation で見つけたこれに関連する唯一のものは：

onChange（value、text）

コンテキスト：ドロップダウン

ドロップダウン項目が選択された後に呼び出されます。選択の名前と値を受け取ります。

これは私には少し混乱するように聞こえます。どうすれば使用できますか？

[〜＃〜] jsfiddle [〜＃〜]

jqueryhtmlsemantic-ui
22
Ionică Bizău

実際には、イベントをバインドするには3つの方法があります。

// globally inherited on init
$.fn.dropdown.onChange = function(){...};

// during init
$('.myDropdown').dropdown({
 onChange: function() {...}
});

// after init
$('.myDropdown').dropdown('setting', 'onChange', function(){...});
70
Jan

ドロップダウンの作成時にonChange設定を追加できるようです：

$(".select-language").dropdown({
    onChange: function (val) {
        alert(val);
    }
});

[〜＃〜] jsfiddle [〜＃〜]

18
Ionică Bizău
    jQuery('.ui.ekstensi.fluid.dropdown').dropdown('setting','onAdd',function (val,text,choice) {

    alert(choice);
    }).dropdown('setting','onRemove',function (removedValue, removedText, removedChoice) {
    //your action here
    alert(removedValue);

    });

[〜＃〜] jsfiddle [〜＃〜]

0
Hadie Danker