jQuery combobox , how to trigger the select event

Question

Hi i am using jquery combo-box for my codeigniter application ,

there are 3 comboboxes . when country value changes , the state combobox again created with new values ,when state combobox value changes the city combobox created with new values .

it works fine for the first time , but after form submit the city and state dropdown change events are not working.

the country combobox change event works , after i change the country combobox value , again the state combo change event works .

the problem here is , i think

1.the state combobox events does not bind until the country combobox change . 2.the city combobox events does not bind until the state combobox change .

** so is there a way to trigger the country combobox select event in document ready.

thanks in advance...........

enter image description here

this is my jquery

jQuery('#combolist_country').combobox({
        selected: function(event, ui) {

            jQuery('#combolist_state').combobox().empty();
            jQuery('#combolist_city').combobox().empty();

            dataVal = jQuery(this).val();

            jQuery.ajax({
                type :  'POST',
                url  :  baseurl + "/search_by_country",
                data: {country_id:dataVal},
                dataType:'json',
                success: function(data)
                {
                    if(data)
                    {
                        var data_arr=data;
                        if(jQuery.isArray(data_arr['state_list']) && data_arr['state_list'].length > 0){
                            var aList = data_arr['state_list'];
                            var sKey;
                            jQuery("#combolist_state").combobox('destroy').empty();
                            jQuery('#combolist_state').removeAttr('disabled');
                            jQuery("#combolist_state").append('<option value="0">Select State</option>');           
                            for (sKey in aList) {
                                jQuery("#combolist_state").append('<option value="' + aList[sKey].StateID + '">' + aList[sKey].StateName + '</option>');
                            }
                            jQuery("#combolist_state").combobox({
                                selected:function(){

                                    jQuery('#combolist_city').combobox().empty();
                                    jQuery('#combolist_neighborhood').combobox().empty();

                                    dataVal = jQuery(this).val();

                                    jQuery.ajax({
                                        type :  'POST',
                                        url  :  baseurl + "search_by_state",
                                        data: {state_id:dataVal},
                                        dataType:"json",
                                        success: function(data)
                                        {
                                            if(data)
                                            {
                                                var data_arr=data;                                  
                                                if(jQuery.isArray(data_arr['city_list']) && data_arr['city'] == 1 && data_arr['city_list'].length > 0){

                                                    var aList = data_arr['city_list'];
                                                    var sKey;
                                                    jQuery("#combolist_city").combobox('destroy').empty();
                                                    jQuery('#combolist_city').removeAttr('disabled');
                                                    jQuery("#combolist_city").append('<option value="0">Select City</option>');         
                                                    for (sKey in aList) {
                                                        jQuery("#combolist_city").append('<option value="' + aList[sKey].CityID + '">' + aList[sKey].CityName + '</option>');
                                                    }  

                                                    jQuery('#combowrap_combolist_city').fadeTo('slow',1);

                                                }                                                   
                                            }                                                                                       
                                        }  
                                    });
                                }
                            });  

                            jQuery('#combowrap_combolist_state').fadeTo('slow',1);                          

                        } 
                    } 
                }                   
            });
        }
});

http://stackoverflow.com/questions/1778184/how-to-change-selected-value-in-combobox-using-javascript might it will help you — Gyan Chandra Srivastava, Sep 21 '12 at 07:55

score 0 · Answer 1 · answered Sep 21 '12 at 08:17

Just use jQuery("#combolist_state").html(list_of_options) to repopulate your combobox and keep the events, instead of destroing and recreating the combobox and events.

var list_of_options = '';
for (sKey in aList)
    list_of_options +='<option value="' + aList[sKey].StateID + '">' + aList[sKey].StateName + '</option>';
jQuery("#combolist_state").html(list_of_options)

score 0 · Answer 2 · answered Sep 21 '12 at 08:31

try this

$('#combolist_country').combobox({
        selected: function (event, ui) {
            var id = ui.item.value;
            if (id > 0) {
                //Fill Drop Down for State and Add Similar logic for City and Pincode
            }
        }
    });

hope this will work!

score -1 · Answer 3 · answered Sep 21 '12 at 08:00

I'm not sure if this will solve your problem, but I recently had the same sort of issue with comboboxes and autopostbacks etc...

I added the following to my jQuery:

    function pageLoad() {
        // Your functionality here
    }

    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoad);

jQuery combobox , how to trigger the select event

3 Answers3