jQuery Plugin elegido añadir opciones dinámicamente

Question

mía es jQuery Elegido desplegable de la siguiente manera:

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

no puedo encontrar cómo puedo añadir opciones, algo así como:

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

Answer 1

En primer lugar, debe agregar el <option> al <select> al que Chosen estaba obligado. Por ejemplo:

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

Entonces, es necesario activar el evento chosen:updated:

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

Más información se puede encontrar here (aunque es necesario 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 se menciona en los comentarios de Tony. La documentación actualizada se puede encontrar en here.

Answer 2

más reciente versión elegida cambió el nombre del evento para "elegido: ACTUALIZACIÓN"

lo que el código será la siguiente:

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

Answer 3

Usted puede llamar a esta función para añadir elemento a escogidos después de guardar el elemento al servidor utilizando Ajax:

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

Ajax llamada:

$.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 4

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