jQuery Chosen cắm thêm tùy chọn động

Question

tôi thực hiện một jQuery Chosen thả xuống như thế này:

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

tôi không thể tìm thấy làm thế nào tôi có thể thêm tùy chọn, một cái gì đó như:

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

Answer 1

Trước tiên, bạn cần thêm <option> s vào số <select> mà Người được chọn. Ví dụ:

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

Sau đó, bạn cần phải kích hoạt sự kiện chosen:updated:

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

thông tin có thể tìm thêm here (mặc dù bạn cần phải cuộn xuống để Change/Update Events).

---

Cập nhật ngày 07 tháng tám năm 2013

Tên sự kiện đã thay đổi để chosen:updated kể từ phiên bản 1.0 (tháng 7 năm 2013) như Tony đề cập trong các ý kiến. Các tài liệu cập nhật có thể được tìm thấy here.

Answer 2

phiên bản mới nhất được lựa chọn thay đổi tên sự kiện để "lựa chọn: cập nhật"

do đó, mã của bạn sẽ như thế này:

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

Answer 3

Bạn có thể gọi chức năng này để thêm yếu tố để lựa chọn sau khi bạn lưu yếu tố để máy chủ sử dụng Ajax:

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

Ajax gọi:

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

Hãy thử điều này ..

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