2

明らかに、「選択」要素がある場合は、いくつかの基本的な JS を使用して、変更用のイベント リスナーを追加できます。

document.querySelector('select').addEventListener('change', function(ev){
  console.log('Changed', ev.target.value)
})

「選択」要素をクリックし、値を変更すると、ログが起動します。シンプルなもの。

ただし、スタイル付きの選択ボックス用のライブラリに取り組んでいます-selectedまたはjQuery依存のないselect2のように。

私のライブラリでは、スタイル付きの選択ボックスをクリックする.valueと、実際の選択ボックスが変更されます。

query('select').value = newValue;

実際の選択ボックスを表示すると、これが機能していることがわかります。

ただし、JS を使用して選択ボックスを変更しても、ボックスの「変更」イベントvalueはトリガーされません。select

JS を使用して選択ボックスの値を変更し、選択ボックスの起動にchangeイベントを関連付ける方法はありますか?

4

3 に答える 3

1

Javascript

function fireEvent(element, event) {
    if (document.createEventObject) {
        // dispatch for IE
        var evt = document.createEventObject();
        return element.fireEvent('on' + event, evt)
    } else {
        // dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event, true, true); // event type,bubbling,cancelable
        return !element.dispatchEvent(evt);
    }
}

document.querySelector('select').addEventListener('change', function (ev) {
    console.log('Changed', ev.target.value)
});

btn.onclick = function () {
    select.selectedIndex = 2;
    var obj = document.querySelector('select');
    fireEvent(obj, 'change');
}

ユーザーコール

var yourPlugin=new CustomSelect(options);
yourPlugin.value("3");

プラグイン機能

function value(val) {
    if (!val) return select.value;
    select.value = val;
    fireEvent(select, 'change');
}

デモ

于 2014-09-22T12:15:55.403 に答える
0

アイデア: 値を変更した後、自分でイベントをトリガーします。

var el = query('select');
el.value = newValue;
el.dispatchEvent(new Event('change'));
于 2014-09-22T11:30:21.837 に答える