web-dev-qa-db-ja.com

jQuery Chosenプラグインは動的にオプションを追加します

jQuery選択されたドロップダウンを次のように作成します。

$('.blah').chosen();

次のようなオプションを追加する方法が見つかりません。

$('.blah').chosen('add', name, value);
jqueryjquery-chosen
49
SBel

まず、選択された<option>に<select>sを追加する必要があります。例えば：

$('.blah').append('<option value="foo">Bar</option>');

次に、chosen:updatedイベントをトリガーする必要があります。

$('.blah').trigger("chosen:updated");

より多くの情報を見つけることができます ここ （ただし、Change / Update Eventsまでスクロールダウンする必要があります）。

2013年8月7日更新

Tonyがコメントで言及しているように、バージョン1.0（2013年7月）以降、イベント名はchosen:updatedに変更されました。更新されたドキュメントは here にあります。

124
Bojangles

最新の選択されたバージョンは、イベント名を「chosen：updated」に変更しました

コードは次のようになります。

$('.blah').append("<option value='"+key+"'>"+value+"</option>");
$('.blah').val(key); // if you want it to be automatically selected
$('.blah').trigger("chosen:updated");
44
aluksidadi

Ajaxを使用して要素をサーバーに保存した後、この関数を呼び出して要素をselectedに追加できます。

function appendToChosen(id,value){
    $('.blah')
        .append($('<option></option>')
        .val(id)
        .attr('selected', 'selected')
        .html(value)).trigger('liszt:updated');
}

Ajax呼び出し：

$.ajax({
    type: 'POST',
    url: 'savepage.php',
    data: $('#modal-form form').serialize(),

    success: function(data, status) {
        appendToChosen(data[0],data[1]);
    },
    error: function (response) {
        alert(response);
    }
    }).always(function(data, status) {
        //hide loading
    });
3
TotPeRo

これを試して..

         $.ajax({
            url: "@Url.Action("Actionname", "Controller")",
            data: { id: id },
                dataType: "json",
                type: "POST",
                success: function (data) {
                $("#id_chzn .chzn-results").children().remove();
                var opts = $('#id')[0].options;
                    $.map(data, function (item) {
                        var text = item.text;
                        for (var i = 0; i < opts.length ; i++) {
                            var option = opts[i];
                            var comparetext = option.innerText;
                            var val = 0;
                            if(text == comparetext)
                            {
                                val = option.index;
                                $('#id_chzn .chzn-results').append("<li id='id_chzn" + val + "' class='active-result' style>" + item.text + "</li>");
                            }
                        }
                    });
                  }
                });
1
muthu

以下のコードを使用して、選択したドロップダウンオプションを動的に更新しましたが、動作します：

var myDropDownOptionHtml ='<option value="0">--Customer--</option>'; 

$('#myDropdownId').html(myDropDownOptionHtml );
setTimeout(function() {
    $("#myDropdownId").trigger("liszt:updated");
},100);

参考までに、jQuery Chosenを使用していますバージョン0.13.

ハッピーコーディング！

0
Deepak Goswami