jQuery 选择插件动态添加选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11352207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Chosen plugin add options dynamically
提问by SBel
I make a jQueryChosen drop-down like this:
我制作了一个jQueryChosen 下拉菜单，如下所示：
$('.blah').chosen();
I can't find how I can add options, something like:
我找不到如何添加选项，例如：
$('.blah').chosen('add', name, value);
回答by Bojangles
First, you need to add the <option>s to the <select>that Chosen was bound to. For example:
首先，您需要将<option>s添加到<select>Chosen 绑定的s 。例如：
$('.blah').append('<option value="foo">Bar</option>');
Then, you need to trigger the chosen:updatedevent:
然后，您需要触发chosen:updated事件：
$('.blah').trigger("chosen:updated");
More information can be found here(although you need to scroll down to Change / Update Events).
可以在此处找到更多信息（尽管您需要向下滚动到Change / Update Events）。
Update 7th August 2013
2013 年 8 月 7 日更新
The event name has changed to chosen:updatedsince version 1.0 (July 2013) as Tony mentions in the comments. The updated documentation can be found here.
chosen:updated正如 Tony 在评论中提到的，自 1.0 版（2013 年 7 月）以来，事件名称已更改为。可以在此处找到更新的文档。
回答by aluksidadi
newest chosen version changed the event name to "chosen:updated"
最新选择的版本将事件名称更改为“选择：更新”
so your code will be like this:
所以你的代码会是这样的：
$('.blah').append("<option value='"+key+"'>"+value+"</option>");
$('.blah').val(key); // if you want it to be automatically selected
$('.blah').trigger("chosen:updated");
回答by TotPeRo
You can call this function to add element to chosen after you save the element to server using Ajax:
在使用 Ajax 将元素保存到服务器后，您可以调用此函数将元素添加到 selected 中：
function appendToChosen(id,value){
$('.blah')
.append($('<option></option>')
.val(id)
.attr('selected', 'selected')
.html(value)).trigger('liszt:updated');
}
Ajax call:
阿贾克斯调用：
$.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
});
回答by muthu
Try this..
尝试这个..
$.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>");
}
}
});
}
});
回答by Deepak Goswami
I used below code to update choosen dropdown options dynamically and it works:
我使用下面的代码动态更新选择的下拉选项并且它有效：
var myDropDownOptionHtml ='<option value="0">--Customer--</option>';
$('#myDropdownId').html(myDropDownOptionHtml );
setTimeout(function() {
$("#myDropdownId").trigger("liszt:updated");
},100);
FYI, I am using jQuery Chosen Version 0.13.0
仅供参考，我正在使用 jQuery 选择版本 0.13.0
Happy Coding!
快乐编码！
