Chosen jQuery plugin dodać opcje dynamicznie

Question

robię jQuery Chosen rozwijanej tak:

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

nie mogę znaleźć jak mogę dodać opcje, coś jak:

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

Answer 1

Po pierwsze, musisz dodać <option> s do <select>, do której wybrał Chosen. Na przykład:

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

Następnie trzeba wyzwolić zdarzenie chosen:updated:

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

Więcej informacji można znaleźć here (choć trzeba przewinąć w dół do Change/Update Events).

---

Aktualizacja 07 sierpnia 2013

Nazwa impreza zmieniła się chosen:updated od wersji 1.0 (lipiec 2013) jako Tony wspomina w komentarzach. Zaktualizowaną dokumentację można znaleźć pod adresem here.

Answer 2

najnowsza wersja wybrana zmienił nazwę wydarzenia na „najważniejsze: zaktualizowane”

tak Twój kod będzie tak:

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

Answer 3

Można wywołać tę funkcję, aby dodać element, aby wybrane po zapisaniu Element do serwera przy użyciu Ajax:

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

Ajax wywołanie:

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

Spróbuj ..

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