我按照以下方式制作 jQuery 选择下拉列表:
$('.blah').chosen();
我找不到如何添加选项,例如:
$('.blah').chosen('add', name, value);
答案 0 :(得分:122)
首先,您需要将<option>
添加到Chosen绑定的<select>
。例如:
$('.blah').append('<option value="foo">Bar</option>');
然后,您需要触发chosen:updated
事件:
$('.blah').trigger("chosen:updated");
可以找到更多信息here(尽管您需要向下滚动到Change / Update Events
)。
2013年8月7日更新
事件名称自1.0版(2013年7月)以来已更改为chosen:updated
,正如Tony在评论中提到的那样。可以找到更新的文档here。
答案 1 :(得分:44)
最新选择的版本将事件名称更改为“selected:updated”
所以你的代码将是这样的:
$('.blah').append("<option value='"+key+"'>"+value+"</option>");
$('.blah').val(key); // if you want it to be automatically selected
$('.blah').trigger("chosen:updated");
答案 2 :(得分:3)
使用Ajax将元素保存到服务器后,可以调用此函数将元素添加到选中:
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
});
答案 3 :(得分:1)
试试这个..
$.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>");
}
}
});
}
});
答案 4 :(得分:0)
我使用下面的代码来动态更新所选的下拉选项,并且可以正常工作:
var myDropDownOptionHtml ='<option value="0">--Customer--</option>';
$('#myDropdownId').html(myDropDownOptionHtml );
setTimeout(function() {
$("#myDropdownId").trigger("liszt:updated");
},100);
仅供参考,我使用的是jQuery选择的版本0.13.0
快乐编码!