Is there a way to make "click" event that works with a select tag on JQuery when using a mobile browser?

Question

To clarify, the question, here's my scenario:

I have a small registration form that is meant to be used on a mobile device.

Naturally, I have been developing the form on my desktop and most of my testing has been done on a desktop. I have tested with a mobile device too and for the most part, everything works - Except for JQuery's "click" events when bind together with a <select> tag.

There are three <select> fields in my form, and they all fetch data dynamically. The idea is that you click on "countries", JQuery fires a click event, and then fetch the countries list from my server using AJAX. When the user clicks on "state", it will fetch all the states that belong to the country selected on the first selection. This behaviors is repeated for "city".

Here's an screenshot: ("País" means country. "Estado/Departamento" is state, and "Ciudad" is city - I apologize for the Spanish names. My actual code is in English so don't worry too much about this!)

In the screenshot above, you can see it actually works.

The three select elements are here:

Pais: <select class="form-control" name="country" id="country"></select>
Estado/Departamento: <select class="form-control" name="state" id="state"></select>
Ciudad: <select class="form-control" name="city" id="city"></select>

And my jQuery code:

                    <script>
                $(document).ready(function(){

                    //Actual listeners

                    $("#country").click(function(event){
                            $.get("pseudoapi/getCountries.php",  function(data){
                                var countries = $("#country");
                                countries.empty();
                                for(var i = 0; i < data.length; i++)
                                {
                                    countries.append("<option value='" + data[i]['id'] +"'>"+ data[i]['name'] +"</option>");
                                }
                            }, "json");
                    });

                    $("#state").click(function(event)
                    {
                        $.get("pseudoapi/getStates.php", {country_id : $("#country").val()}, function(data){
                            var state = $("#state");
                            state.empty();
                            for(var i = 0; i < data.length; i++)
                            {
                                state.append("<option value='" + data[i]['id'] +"'>"+ data[i]['name'] +"</option>");
                            }
                        }, "json");
                    });

                    $("#city").click(function(event)
                    {
                        $.get("pseudoapi/getCities.php", {country_id : $("#country").val(), state_id : $("#state").val()}, function(data){
                            var city = $("#city");
                            city.empty();
                            for(var i = 0; i < data.length; i++)
                            {
                                city.append("<option value='" + data[i]['id'] +"'>"+ data[i]['name'] +"</option>");
                            }
                        }, "json");
                    });
                });

                $("#country").change(function(event){
                    $("#state").empty();
                    $("#city").empty();
                });

                $("#state").change(function(event){
                    $("#city").empty();
                });
                </script>

Found Solutions that didn't work

I have googled for a while and found a few solutions. Sadly none of them worked.

First, I learned about jQuery mobile and its vclick event. I was almost certain this was going to work, but it didn't. Chrome complaints that the vclick event doesn't exist for select tags.

Second, I was told to load jQuery Mobile after the rest of my code loads up. I loaded the script right before the ending </body> tag and it didn't make the situation better.

Finally, maybe discouraging but it looks like the click event is not officially supported by the select tags, and because of this it will supposedly work in some browsers but not on others. To be honest, I'm completely lost here.

If there is no way to directly answer my question, what would be the best way to populate a select tag with options as soon as it gets clicked even on mobile?

Answer 1

why don't you load the countries on page load and assign the change event to the select so when the users selects a country it will populate the states for that country and do the same for state