1
votes

I have two drop down values. States and Cities. Also I have 2 tables in my database with Cities and States.

Thing is with the help of JQuery i'm getting corresponding Cities to the State i select. But thing is can't append these corresponding city names to the second dropdown list. Since there are more than 1000 of city names i can append it with $().append() function as it makes my browser hang.

this is my jquery

$("#state_name").change(function() {
        var state = $('#state_name :selected').val();
        console.log(state);
        $.ajax({
                url: '/company_profile/update_city_select',
                type: 'GET',
                data: {
                    id: state
                },
                success: function(response) {
                    // $("#city_name select").empty();
                    var no_of_cities = response.cities.length;
                    console.log(no_of_cities);
                    var collection = response.cities;
                    //$('#city_name select').attr('<% :collection%>','<%' +collection+'%>');
                    }
             });
    return false;
});

response.cities[i].name gives ith cities name.

1
If data load large, you should use jquery autocomplete or select box include auto complete. Hope this can help you :) - Peter89
autocomplete did work to someextend. But im still looking a way to make this dropdown list possible without causing any browser hang - Nidhin S G

1 Answers

2
votes

You can load at a time 10 city name and with scroll you can embed Load more Like facebook ,with this load more you can query to get another 10 records by using offset and limit,

and use append 10 element at a time it is the best method by which you can implement your records

        $("#load_more_btn").live('click', function(){
            var offset = $(this).data("offset");
            $.get('/controller_name', {offset : offset});                                     
        });