Update select value if exists in database

Question

I have a problem, it doesn't update the value of 2 selects. The value is a numeric code and a string is stored in DB.

Here is my example in HTML:

<select id="jform_country" name="jform[country]" class="form-control required chzn-done">
    <option value="">Select country...</option>
    <option value="1012234" selected="selected">Name country 1</option>
    <option value="1012257">Name country 2</option>
</select>
<select id="jform_city" name="jform[city]" class="form-control required chzn-done">
    <option value="">Select city...</option>
    <option value="1982727" selected="selected">Name city 1</option>
    <option value="1982739">Name city 2</option>
</select>

I retrieve DB value with a function in php (getData). But here is my problem... I try to pass that variable from PHP to JavaScript, it seems to work correctly and I change the value of the select with jQuery. But when refreshing the page, in some cases it does not work correctly.

Here is my code in PHP and jQuery:

$data = $model->getData();
$country = $data->country;
$city = $data->city;
echo '<script>';
echo 'var selectcountry = '. json_encode($country) .';';
echo 'var selectcity = '. json_encode($city) .';';
echo '</script>';

And with jQuery I recieve those variables:

jQuery(document).ready(function () {

        setTimeout(function() {
            rescueValue(selectcountry, selectcity);
        }, 800);

        function rescueValue(selectcountry, selectcity) {

            if (selectcountry != null) {
                jQuery("#jform_country option:contains('"+ selectcountry +"')").attr("selected", "selected");
                jQuery("#jform_country").trigger("liszt:updated");
            }

            if (selectcity != null) {
                jQuery("#jform_city option:contains('"+ selectcity +"')").attr("selected", "selected");
                jQuery("#jform_city").trigger("liszt:updated");
            }
        }

    });

Could it be that it works asynchronously? I tried to put a setTimeout but still I don't solve it. How can I make it recover the PHP value and update it in a simple way (similar to this one)? Thanks!

Answer 1

It's more correct to set the value of the select , than finding the option value from the list to set it the selected attribute, which may not always work if, for example, there's already another option with the selected attribute.

You can use jquery.val to set the value directly.

jQuery(document).ready(function () {

        setTimeout(function() {
            rescueValue(selectcountry, selectcity);
        }, 800);

        function rescueValue(selectcountry, selectcity) {

            if (selectcountry != null) {
                jQuery("#jform_country").val(selectcountry).trigger("liszt:updated");
            }

            if (selectcity != null) {
                jQuery("#jform_city").val(selectcity).trigger("liszt:updated");
            }
        }

    });