webentwicklung-frage-antwort-db.com.de

Drop-Handler für semantische Benutzeroberfläche

Ich habe die folgende Dropdown-Liste mit 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>

Und in der jQuery-Seite initiiere ich es:

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

Wie kann ich den change-Handler hinzufügen?

Das einzige, was ich damit in der Dokumentation fand, ist

onChange (Wert, Text)

Kontext: Dropdown

Wird aufgerufen, nachdem ein Dropdown-Element ausgewählt wurde. erhält den Namen und den Wert der Auswahl.

Das klingt für mich etwas verwirrend. Wie kann ich es benutzen?

JSFIDDLE

18
Ionică Bizău

Es gibt drei Möglichkeiten, das Ereignis zu binden:

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

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

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

Es scheint, dass die Einstellung onChange beim Erstellen des Dropdowns hinzugefügt werden kann:

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

JSFIDDLE

17
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