web-dev-qa-db-ja.com

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

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

documentation は、リストの更新、およびオプションが選択されたときにイベントをトリガーすることをカバーしていますが、現在選択されている値を外部から変更することについては何も（私は見ることができます）.

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

$('button').click(function() {
    $('select').val(2);
    $('select').chosen().val(2);
    $('select').chosen().select(2);
});
javascriptjqueryselectjquery-chosen
93
gak

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

$(document).ready(function() {

    $('select').chosen();

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

});

注：1.0より前のバージョンでは次を使用しました。

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

私の答えは遅れていますが、上記のすべての答えに含まれていない情報を追加したいと思います。

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

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

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

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

次のリンクから収集された情報：
1） Chosen Docs
2） Chosen Github Discussion

34
Aamir

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

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

<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 appendオプションを含む）： https://jsfiddle.net/59x3m6op/1/

1
Tobi G.

複数タイプの選択の場合、および/またはドロップダウンリストアイテム内で既に選択されたアイテムを1つずつ削除する場合は、次のようなものを使用できます。

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');
});
0
SlavisaPetkovic