jQueryselect插件dynamic添加选项

我做了一个jQueryselect下拉菜单，如下所示：

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

我找不到如何添加选项，如下所示：

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

Answer 1

首先，您需要将<option>添加到<select>绑定的<select> 。 例如：

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

然后，您需要触发chosen:updated事件：

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

更多信息可以在这里find（虽然你需要向下滚动到Change / Update Events ）。

---

2013年8月7日更新

事件名称已更改为chosen:updated自Tony版本1.0（2013年7月）以来chosen:updated正如Tony在评论中提到的那样。 更新的文档可以在这里find。

Answer 2

最新select的版本将事件名称更改为“选中：更新”

所以你的代码将是这样的：

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

Answer 3

在使用Ajax将元素保存到服务器之后，可以调用此函数添加要select的元素：

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

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 4

尝试这个..

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