Chosenプラグインを使用した選択での選択の変更


105

Chosenプラグインを使用して、selectで現在選択されているオプションを変更しようとしています。

ドキュメンテーションカバーリストを更新し、外部から現在選択されている値を変更するにはオプションが選択されているイベントが、何を(私が見ることができる)トリガ。

私はjsFiddleを作成して、コードと、選択を変更するために試みた方法をデモンストレーションしました

$('button').click(function() {
    $('select').val(2);
    $('select').chosen().val(2);
    $('select').chosen().select(2);
});

あなたが提供したjsfiddleデモを実行できませんでした。更新してください。
ラッキー

はい。デモを実行できなかった理由は、選択されたライブラリが誤ったURLをポイントしていたためです。これが更新されたjsfiddleです
ラッキー

回答:


214

ドキュメントの「動的に選択された更新」セクションから:フィールドで「chosen:updated」イベントをトリガーする必要があります

$(document).ready(function() {

    $('select').chosen();

    $('button').click(function() {
        $('select').val(2);
        $('select').trigger("chosen:updated");
    });

});

注:1.0より前のバージョンでは、次のものが使用されていました。

$('select').trigger("liszt:updated");

6
chosen:updatedliszt:updated
参考

複数選択された検索結果リストから、現在最も一致するオプションを選択する方法を探していたので、ここでつまずきました(フォーカスが失われたときはいつでも)。ここに私の探検についての短いフィドルがあります。イベントでイベントをトリガーする必要はありません。おそらく、それは他の誰かにも役立つでしょう... :)
Timo

私は内部のval()で値を取ることはありません選択したプラグインが付属され、再びメニューをクリックすると、その上のコードの作品にもかかわらず、これは意味once.Iのみ発生なぜこれが起こっている可能性があります。
ディミトリスPapageorgiou

9
私は、これは古い記事です知っている-しかし、更新の簡単な方法はただ1つの文字列である: $('select').val(2).trigger("chosen:updated");
アンドリュー・ニュービー

10
@Lucas Welper:あなたも変更する必要$('select').val(2);$('select').val(2).change();jQueryを使って選択の選択オプションを変更すると、変更イベントをトリガしていないため、一部の人々はそれを必要とするかもしれません。
machineaddict 2015年

41

私の答えは遅いですが、上記のすべての答えで見逃されているいくつかの情報を追加したいと思います。

1)選択した選択で単一の値を選択する場合。

$('#select-id').val("22").trigger('chosen:updated');

2)選択した複数の選択を使用している場合、一度に複数の値を設定する必要がある場合があります。

$('#documents').val(["22", "25", "27"]).trigger('chosen:updated');

次のリンクから収集された情報:
1)選択されたドキュメント
2)選択されたGithubディスカッション


「22」、「25」などは値であり、内部HTMLではないことに注意してください。たとえば、<option value = "25"> sometext </ option>
Fadi Bakoura

2

選択したオプションを操作するために、現在のオプションを削除する必要がある場合があります。

オプションを設定する方法の例を次に示します。

<select id="mySelectId" class="chosen-select" multiple="multiple">
  <option value=""></option>
  <option value="Argentina">Argentina</option>
  <option value="Germany">Germany</option>
  <option value="Greece">Greece</option>
  <option value="Japan">Japan</option>
  <option value="Thailand">Thailand</option>
</select>

<script>
activateChosen($('body'));
selectChosenOptions($('#mySelectId'), ['Argentina', 'Germany']);

function activateChosen($container, param) {
    param = param || {};
    $container.find('.chosen-select:visible').chosen(param);
    $container.find('.chosen-select').trigger("chosen:updated");
}

function selectChosenOptions($select, values) {
    $select.val(null);                                  //delete current options
    $select.val(values);                                //add new options
    $select.trigger('chosen:updated');
}
</script>

JSFiddle(howto追加オプションを含む):https ://jsfiddle.net/59x3m6op/1/


1
selectにまだ値がない場合を考慮して、代わりにに更新var selected = mySelect.val();var selected = mySelect.val() || [];てください。
ElliotSchmelliot 2018

0

以下の場合は、複数選択の種類および/またはあなたが直接ドロップダウンリストの項目の中に、ひとつずつ、すでに選択した項目を削除したい場合は、あなたがのようなものを使用することができます。

jQuery("body").on("click", ".result-selected", function() {
    var locID = jQuery(this).attr('class').split('__').pop();
    // I have a class name: class="result-selected locvalue__209"
    var arrayCurrent = jQuery('#searchlocation').val();
    var index = arrayCurrent.indexOf(locID);
    if (index > -1) {
        arrayCurrent.splice(index, 1);
    }
    jQuery('#searchlocation').val(arrayCurrent).trigger('chosen:updated');
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.