【问题标题】:Semantic UI dropdown change handler语义 UI 下拉更改处理程序
【发布时间】:2013-12-28 18:04:55
【问题描述】:

我有以下使用语义 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(值,文本)

上下文:下拉菜单

在选择下拉项后调用。接收选择的名称和值。

这听起来让我有点困惑。我该如何使用它?

JSFIDDLE

【问题讨论】:

    标签: jquery html semantic-ui


    【解决方案1】:

    其实绑定事件有3种方式:

    // globally inherited on init
    $.fn.dropdown.onChange = function(){...};
    
    // during init
    $('.myDropdown').dropdown({
     onChange: function() {...}
    });
    
    // after init
    $('.myDropdown').dropdown('setting', 'onChange', function(){...});
    

    【讨论】:

    • 支持初始化后更改设置。在许多情况下都很有用
    • 根据文档,onChange: function (val, text, choice) 中的choice 是什么,应该如何使用它?
    【解决方案2】:

    好像onChange在创建下拉菜单的时候可以设置:

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

    JSFIDDLE

    【讨论】:

    • 顺便说一句,我们如何将其 value="fr-FR" 更改为 "anything_else"?
    • @TheMouseMan 为此提出问题。如果你把它链接在这里,我会尽力给你一个好的答案。
    • Here. 谢谢。
    • @TheMouseMan 我对你的问题投了赞成票。我做了一些研究,但我还没有发现任何有用的东西。如果我找到一个好的答案,我会发布它。也许其他人会比我快。 :-)
    • 对我来说,tt 将值存储在 db 中,但它使用“\r\n Value \r\n”存储。尝试修剪不喜欢它atm。感谢您的投票。
    【解决方案3】:
        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

    【讨论】:

    • 尽管代码本身可能会说话,但提供一些细节将有助于提高您的回答质量!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-07-04
    • 1970-01-01
    • 2013-09-28
    • 2019-04-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多