Question

我正在使用Chosen plugin选择框。我在ajax请求中替换这两个框。我希望复选框在预定时填充。我尝试了一些东西而且失败了。我读了documentation这个并且无法完成。这是我在阅读文档后尝试过的内容。一旦ajax响应来了，我正在做这些事情。

var city = $('#hdnCity').val();
//**Ajax Request Goes and the response is here**//
$('#searchParams').html(responseText);
var value = $("#favCities1 option:contains("+city+")").attr('selected', 'selected');
$("#chzn-select").val(value).trigger("liszt:updated");

我无法做到这一点。帮助者很明显。谢谢你提前!!!

Answer 1

问题在于最后一行：$("#chzn-select").val(value).trigger("liszt:updated");

您必须分开，因为$("#chzn-select").val(value)仅返回jQuery对象，而不返回<select>元素。因此，Chosen无法接听liszt:updated事件，因为它只收听<select>。

所以你必须这样做：

$("#chzn-select").val(city);
$("#chzn-select").trigger("liszt:updated");

参见工作示例：http://jsfiddle.net/amyamy86/qQCw8/

Answer 2

在没有任何进一步信息的情况下，我想这是你如何处理ajax响应的一个问题

searchParams的更新应该在ajax成功回调中进行

var city = $('#hdnCity').val();

$.ajax({
    url: '',
    ...
}).done(function(responseText){
    //**Ajax Request Goes and the response is here**//
    $('#searchParams').html(responseText);
    var value = $("#favCities1 option:contains("+city+")").attr('selected', 'selected').val();
    $("#chzn-select").val(value).trigger("liszt:updated");
})

Answer 3

Chrome要求您立即触发其他活动http://harvesthq.github.io/chosen/。如果不触发此事件，多重选择框将不会更新。

$('#chzn-select').trigger('chosen:updated')

您可以使用此jsfiddle http://jsfiddle.net/LjtVa/

查看它的实际效果

如何在页面加载时带下选定值的下拉列表（选择）。

3 个答案: