Select of cities and states on the site

Question

I’m riding a website, and on the home page I created a select for states and cities, the problem is that the home page of the website is catching up too.

Does anyone know how I can do this select without halting the website? Or maybe do it another way?

The website link is http://www.simplemed.com.br

<?php 

ItemForm::region_select(osc_get_regions(osc_user_region()), osc_user()); ?> </div>
</div>
<div class="col-md-3">
    <div class="cell selector">
        <!--------------City-------------------->
        <?php ItemForm::city_select(osc_get_cities(osc_user_region()), osc_user()); ?>
        <!--------------City End-------------------->
    </div>
</div>
<div class="col-md-2">
    <div class="cell reset-padding">
        <button class="btn btn-success btn_search">
            <?php _e( "Search", 'osclasswizards');?> </button>
    </div>
</div>
</div>
</div>
<div id="message-seach"></div>
</div>
</div>
</form>
<script type="text/javascript">
    $(document).ready(function() {
        $("#regionId").on("change", function() {
            var pk_c_code = $(this).val(); <? php
            if ($path == "admin") { ?>
                var url = '<?php echo osc_admin_base_url(true)."?page=ajax&action=cities&regionId="; ?>'
                pk_c_code; <? php
            } else { ?>
                var url = '<?php echo osc_base_url(true)."?page=ajax&action=cities&regionId="; ?>'
                pk_c_code; <? php
            }; ?>
            var result = '';
            if (pk_c_code != '') {
                $("#cityId").attr('disabled', false);
                $.ajax({
                    type: "POST",
                    url: url,
                    dataType: 'json',
                    success: function(data) {
                        var length = data.length;
                        if (length > 0) {
                            result = '<option selected value=""><?php _e("Select a city..."); ?></option>';
                            for (key in data) {
                                result = '<option value="'
                                data[key].pk_i_id '">'
                                data[key].s_name '</option>';
                            }
                            $("#city").before('<select name="cityId" id="cityId" ></select>');
                            $("#city").remove();
                        } else {
                            result = '<option value=""><?php _e('
                            No results ') ?></option>';
                            $("#cityId").before('<input type="text" name="city" id="city" />');
                            $("#cityId").remove();
                        }
                        $("#cityId").html(result);
                    }
                });
            } else {
                $("#cityId").attr('disabled', true);
            }
        });
        if ($("#regionId").attr('value') == "") {
            $("#cityId").attr('disabled', true);
        }
    });
</script>

Answer 1

The immediate problem does not seem to be either the query or jQuery: your main page has more than one megabyte! The first order of business is you push the query that pulls the list of cities to another page and load via AJAX (a second business order is, on the page pulling the list of cities, filter by the state the user has chosen).

I didn’t see the code you wrote, but apparently you’re pulling the data via PHP (which generates the brick I referred to above) and then doing AJAX (to pull the data that already came in the first execution); gives a Ctrl+S and looks at the size of the resulting file to see that the list of cities is coming in the original page load.