Alternatif untuk acara onChange dengan dropdown Semantic UI?

Ini adalah pertanyaan bodoh tapi saya sudah menjelajahi seluruh situs Semantic UI, dan mencari di sini dan saya belum menemukan solusinya.

Intinya adalah: Saya telah menggunakan kode di bawah ini dengan daftar dropdown Semantik. Ini berfungsi dengan baik – kecuali saya memiliki komponen tabel yang melaluinya pengguna juga dapat membuat pilihan (yang memicu suatu fungsi) – dan ketika mereka melakukannya, saya memperbarui dropdown Semantik untuk mencerminkan pilihan saat ini. . . dan kemudian peristiwa onChange diaktifkan – sehingga suatu fungsi berjalan dua kali ketika tidak diperlukan.

Saya mencoba menggunakan onSelect tetapi tampaknya itu bukan acara yang valid untuk dropdown. Saya dapat melakukan peretasan bodoh untuk mengatasi hal ini, tetapi saya lebih suka menggunakan acara lain. Apakah ada?

$(function () {
    $('#productStates').dropdown({
        allowAdditions: true,
        allowReselection: true,
        placeholder: "Select State",
        onChange: function (value, text) {
            if (projectData == undefined) return;                
            loadStateByID(value)
        }
    })
});

javascript semantic-ui
person spring    schedule 22.11.2018    source sumber
comment
onChange: function(nilai, teks, $selectedItem) { // tindakan khusus }   -  person LDS    schedule 22.11.2018

Jawaban (1)


arrow_upward
0
arrow_downward

Oke - selesaikan ini. Semoga Dokumen semantik lebih jelas mengenai penanganan peristiwa.

Saya mencoba mencegah fungsi "memuat" dipanggil dua kali ketika pengguna mengklik sel tabel dan dropdown diperbarui untuk mencerminkan pilihan saat ini. Saya memperbarui dropdown menggunakan:

$('#productStates').dropdown('set selected', activeStateID);

Pengendali peristiwa onChange menangkap semua perubahan sehingga peristiwa "muat" akan diaktifkan dua kali. Menggunakan action, peristiwa hanya dipicu pada tindakan pengguna, bukan pada pengaturan status tarik-turun melalui kode.

$('#productStates').dropdown({
        allowAdditions: true,
        allowReselection: true,
        placeholder: "Select State",
        action: function (value, text) {
            if (projectData == undefined) return;
            $(this).dropdown('set selected', value);
            loadStateByID(text)
        }
    })
person spring    schedule 22.11.2018