web-dev-qa-db-ja.com

jSで値が変更されたときにonchangeイベントを発生させないように選択

JSFiddle

フィドルに3つのselects（1つの空白）を含むoptionを設定しました。手動でfooからbarに切り替えると、changeリスナーが正常に起動します。

ここで、JSを介してselectを ここにいくつかの回答に投稿されたコード でリセットすると、新しく選択された空白のオプションに対してchangeイベントが発生しません。 resetボタンをクリックする前に選択したオプションを選択すると、onchangeイベントも発生しません。

selectの値はが上記の関数で変更されていると確信しています。これは、次のようになります fiddle ですが、selectのonchangeイベントは単に発生しません。

また、onchange、onclick、oninputイベントを試しましたが役に立ちませんでした。今のところ、MutationObserverを使用するか、レンダリングされた選択された要素をDOMから削除して別の要素を作成する必要があるのか​​疑問に思っていますが、おそらくそれを考えすぎています。どんな助けでも大歓迎です。

また：

この答えは私を大いに助けました： jQuery選択リセット

この答えは役に立ちませんでした： 選択したプロトタイプjavascript選択ボックスでonchangeイベントを発生させる方法は？

Jsfiddle.netが削除された場合の将来の参照用のコード：

[〜＃〜] html [〜＃〜]

<div id="wrapper">
    <select id="chosen">
        <option value="!!EMPTY VALUE!!"></option>
        <option value="foo">foo</option>
        <option value="bar">bar</option>
    </select>
</div>
<br>
<button id="reset">Reset</button>

[〜＃〜] js [〜＃〜]

$(function() {
    $('#chosen').chosen();

    $('#wrapper').on('change', '#chosen', function() {
        console.log('onchange: ' + this.value);
    });

    $('#reset').click(function() {
        $("#chosen").val('').trigger("liszt:updated"); //doesn't work
        //$("#chosen").prop('selectedIndex', 0).trigger("liszt:updated"); //doesn't work either
        console.log('reset: ' + $('option:selected').val());
    });
});
javascriptjqueryjquery-chosen
9
Fabrício Matté

$(selector).trigger("change")で値を変更した後、変更をトリガーする必要があります

$('#reset').click(function() {
        $("#chosen").val('').trigger("change"); //doesn't work
        //$("#chosen").prop('selectedIndex', 0).trigger("liszt:updated");
        console.log('reset: ' + $('option:selected').val());
    });
9
Adam Merrifield

私のために働いたFabrícioMattéのコメントから回答をコピーして、他の人がこの投稿を見たり、私がしたように最初は解決策を見逃したりしないようにします。

_$('#chosen_chzn').remove();
$('#chosen').val('').change().removeClass('chzn-done').chosen();
_

彼のフィドルでこれを参照してください

私はもともと.trigger('liszt:updated')の代わりに.change()呼び出しを使い続けようとしましたが、うまくいきませんでした。 .removeClass('chzn-done')の背後にある理由もわかりませんでしたが、これも不可欠です。そうしないと、選択ボックスが消えてしまいます。

4
Tyler