javascript - How to bring a dropdown (Chosen) with selected value on page loads.? - Stack Overflow

admin管理员组

文章数量:1346196

I am using Chosen plugin for Select box. I am replacing these both boxes on an ajax request. I want the check box to be pre filled when it es. I tried something and it fails. I read the documentation of this and unable to acplish. Here is what i have tried after reading the docs. Once ajax response came i am doing these things.

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 acplish this. Helpers are appreciable. Thankyou in Advance!!!

I am using Chosen plugin for Select box. I am replacing these both boxes on an ajax request. I want the check box to be pre filled when it es. I tried something and it fails. I read the documentation of this and unable to acplish. Here is what i have tried after reading the docs. Once ajax response came i am doing these things.

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 acplish this. Helpers are appreciable. Thankyou in Advance!!!

• javascript
• jquery
• ajax
• jquery-chosen

Share Improve this question Follow edited Mar 28, 2013 at 19:36 j0k 22.8k2828 gold badges8181 silver badges9090 bronze badges asked Mar 27, 2013 at 4:47 Vignesh GopalakrishnanVignesh Gopalakrishnan 1,99299 gold badges3232 silver badges5353 bronze badges 1

• can you share the ajax request also – Arun P Johny Commented Mar 27, 2013 at 5:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

The problem is with the last line: $("#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:updated event since it's only listening to the <select>.

So you will have to do this:

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

See working example: http://jsfiddle/amyamy86/qQCw8/

In the absence of any further information, I guess it is a problem with how you are handling the ajax reponse

Updation of searchParams should happen within the ajax success callback

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

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.

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

You can see it in action with this jsfiddle, http://jsfiddle/LjtVa/

本文标签： javascriptHow to bring a dropdown (Chosen) with selected value on page loadsStack Overflow