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!