javascript 如何在页面加载时带有选定值的下拉列表（已选择）。？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15652096/
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
How to bring a dropdown (Chosen) with selected value on page loads.?
提问by Vignesh Gopalakrishnan
I am using Chosen pluginfor Select box. I am replacing these both boxes on an ajax request. I want the check box to be pre filled when it comes. I tried something and it fails. I read the documentationof this and unable to accomplish. Here is what i have tried after reading the docs. Once ajax response came i am doing these things.
我正在为选择框使用选择插件。我正在根据 ajax 请求替换这两个框。我希望复选框出现时预先填写。我尝试了一些东西，但失败了。我阅读了这个文档并且无法完成。这是我在阅读文档后尝试过的。一旦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");
I am unable to accomplish this. Helpers are appreciable. Thankyou in Advance!!!
我无法做到这一点。帮手是可观的。先感谢您！！！
回答by Amy
The problem is with the last line: $("#chzn-select").val(value).trigger("liszt:updated");
问题出在最后一行： $("#chzn-select").val(value).trigger("liszt:updated");
You will have to separate because $("#chzn-select").val(value)only returns jQuery object, but not the <select>element. Therefore, Chosen can't pick up the liszt:updatedevent since it's only listening to the <select>.
你将不得不分开，因为$("#chzn-select").val(value)只返回 jQuery 对象，而不是<select>元素。因此，Chosen 无法接收该liszt:updated事件，因为它仅侦听<select>.
So you will have to do this:
所以你必须这样做：
$("#chzn-select").val(city);
$("#chzn-select").trigger("liszt:updated");
See working example: http://jsfiddle.net/amyamy86/qQCw8/
参见工作示例：http: //jsfiddle.net/amyamy86/qQCw8/
回答by Arun P Johny
In the absence of any further information, I guess it is a problem with how you are handling the ajax reponse
在没有任何进一步信息的情况下，我想这是您如何处理 ajax 响应的问题
Updation of searchParamsshould happen within the ajax success callback
更新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");
})
回答by Michael Lawson
Chrome requires that you fire a different event now, http://harvesthq.github.io/chosen/. Without firing this event, the multiple select box wont get updated.
Chrome 要求您现在触发一个不同的事件，http://harvesthq.github.io/chosen/。如果不触发此事件，则不会更新多选框。
$('#chzn-select').trigger('chosen:updated')
You can see it in action with this jsfiddle, http://jsfiddle.net/LjtVa/
你可以在这个 jsfiddle http://jsfiddle.net/LjtVa/ 中看到它的作用
