Semantic UI dropdown change handler

Question

I have the following dropdown using Semantic 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>

And in the jQuery side I init it:

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

How can I add the change handler?

The only thing related to this I found in the documentation is:

onChange(value, text)

Context: Dropdown

Is called after a dropdown item is selected. receives the name and value of selection.

This sounds a little confusing for me. How can I use it?

JSFIDDLE

Jan · Accepted Answer · 2015-09-24T11:39:01.017

82

Actually, there are three ways to bind the event:

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

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

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

edited Sep 24 '15 at 11:39

answered Aug 20 '14 at 14:12

Jan

2,747
27
35

7

upvote for the change of settings after the init. Can be useful in many situations – challet Apr 22 '16 at 23:47
4

according to the Documentation, what is `choice` in `onChange: function (val, text, choice)` and how should one use it? – Peyman Mohamadpour Jan 09 '17 at 08:12

score 20 · Answer 2 · answered Dec 28 '13 at 18:11

20

It seems that onChange setting can be added when creating the dropdown:

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

JSFIDDLE

answered Dec 28 '13 at 18:11

Ionică Bizău

109,027
88
289
474

BTW, how can we change its value="fr-FR" to "anything_else"? – RajG Mar 28 '14 at 12:33
@TheMouseMan Ask a question for that. If you link it here, I will try to give you a good answer. – Ionică Bizău Mar 28 '14 at 13:09
[Here.](http://stackoverflow.com/questions/22715193/dropdown-semantic-ui-change-the-hidden-filed-values) Thanks. – RajG Mar 28 '14 at 14:10
@TheMouseMan I voted your question. I made a little research, but I didn't find anything useful yet. If I find a good answer I will post it. Maybe others will be faster than me. :-) – Ionică Bizău Mar 28 '14 at 16:03
For me, tt is storing the value in db but it is storing with "\r\n Value \r\n ". Tried trimming not liking it atm. thanks for the votes up. – RajG Mar 28 '14 at 16:06
@TheMouseMan Sorry for delay, but I finally found [a solution](http://stackoverflow.com/a/23980469/1420197) for you problem. :-) – Ionică Bizău Jun 01 '14 at 13:41
Thank you so much it works for me. I needed the value somewhere else but i managed with global variable. – Moxet Khan Dec 22 '15 at 09:46
Is there a possibility, to get the content value? So, when I change the language in this FIDDLE (http://jsfiddle.net/BJyQ7/1/), how can I get the selected language an not the selected data-value? – Dong3000 Jun 02 '16 at 09:30
How should one, get the `select`, onChange? – Peyman Mohamadpour Jan 09 '17 at 10:20

Hadie Danker · Answer 3 · 2018-05-08T07:14:40.500

-2

    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

edited May 08 '18 at 07:14

answered May 08 '18 at 07:02

Hadie Danker

49
3

Although the code may speak for itself providing some details would help improve the quality of your answer! – mrun May 08 '18 at 07:25

Semantic UI dropdown change handler

3 Answers3

Linked