Плагин jQuery Chosen динамически добавляет параметры

Я создаю раскрывающийся список jQuery Chosen следующим образом:

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

Я не могу найти, как я могу добавить параметры, что-то вроде:

$('.blah').chosen('add', name, value);

person SBel    schedule 05.07.2012    source источник


Ответы (5)


Во-первых, вам нужно добавить <option>s к <select>, к которым был привязан Chosen. Например:

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

Затем вам нужно вызвать событие chosen:updated:

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

Дополнительную информацию можно найти здесь (хотя вам нужно прокрутить вниз до Change / Update Events).


Обновление от 7 августа 2013 г.

Название события изменилось на chosen:updated с версии 1.0 (июль 2013 г.), как Тони упоминает в комментариях. Обновленную документацию можно найти здесь.

person Bojangles    schedule 05.07.2012
comment
@Mike Извини, что ;) это происходит со мной постоянно! - person Bojangles; 06.07.2012
comment
Начиная с версии 1.0, триггер которой сейчас выбран: обновлено. См. harvesthq.github.io/chosen/#change-update-events. - person Tony; 08.08.2013
comment
Я предлагаю вам обновить свой ответ, заменив $('.blah').trigger(list:updated); с $('.blah').trigger(выбрано:обновлено); - потому что такие как я читают только код - person Dustin Sun; 01.11.2017
comment
@lonelyloner Спасибо, я обновил примеры кода в своем ответе. - person Bojangles; 02.11.2017

самая новая выбранная версия изменила название события на «выбрано: обновлено»

поэтому ваш код будет таким:

$('.blah').append("<option value='"+key+"'>"+value+"</option>");
$('.blah').val(key); // if you want it to be automatically selected
$('.blah').trigger("chosen:updated");
person aluksidadi    schedule 23.10.2013
comment
Это работает для меня. Но следующий код не работает ($('.blah').trigger(list:updated);). - person Dulitha Kumarasiri; 15.07.2014
comment
это заменяет существующие теги. У меня сработал ответ @TotPeRo - person dreamer; 25.02.2016

Вы можете вызвать эту функцию, чтобы добавить элемент к выбранному после сохранения элемента на сервере с помощью Ajax:

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

Звонок Аякса:

$.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
    });
person TotPeRo    schedule 21.08.2014

Попробуй это..

         $.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>");
                            }
                        }
                    });
                  }
                });
person muthu    schedule 21.05.2015

Я использовал приведенный ниже код для динамического обновления выбранных параметров раскрывающегося списка, и он работает:

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

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

К вашему сведению, я использую jQuery Chosen Версия 0.13.0

Удачного кодирования!

person Deepak Goswami    schedule 06.08.2018