example - jQuery Chosen plugin agrega opciones dinámicamente

chosen select bootstrap

Question

Hago un menú desplegable jQuery Elegido como este:

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

No puedo encontrar cómo puedo agregar opciones, algo así como:

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

Answer 1

En primer lugar, debe agregar las <option> a <select> que <select> Chosen. Por ejemplo:

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

Luego, debe activar el evento chosen:updated :

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

Puede encontrar más información here (aunque necesita desplazarse hacia abajo para Change / Update Events ).

Actualización 7 de agosto de 2013

El nombre del evento ha cambiado a chosen:updated desde la versión 1.0 (julio de 2013) como Tony menciona en los comentarios. La documentación actualizada se puede encontrar here .

Answer 2

La última versión elegida cambió el nombre del evento a "elegido: actualizado"

entonces tu código será así:

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

Answer 3

Prueba esto..

         $.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>");
                            }
                        }
                    });
                  }
                });

Answer 4

Puede llamar a esta función para agregar un elemento al elegido después de guardar el elemento en el servidor usando Ajax:

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

Llamada 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
    });

Answer 5

Utilicé el código siguiente para actualizar dinámicamente las opciones seleccionadas y funciona:

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

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

FYI, estoy usando jQuery Chosen Version 0.13.0

Feliz Codificación!