Отображение легко выбранных данных в раскрывающемся списке каскада

Question

Я создал каскадный выпадающий список для выбора страны и города (в зависимости от выбранной страны), чтобы пользователи могли обновлять свои профили.

В более ранней версии, где пользователи выбирают страну и город, все в порядке.Но так как это будет страница обновления профиля, я хочу показать уже выбранные данные, если данные не нулевые.

Работает нормально для выбора страны, но не может понять, как реализовать эти уже выбранные данные для запуска JavaScript, потому что второй выпадающий список срабатывает только при выборе в первом раскрывающемся списке.

ЛюбойПомощь приветствуется!

Вот часть javascript

<script language="javascript" type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
    var xmlhttp=false;  
    try{
        xmlhttp=new XMLHttpRequest();
    }
    catch(e)    {       
        try{            
            xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e){
            try{
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e1){
                xmlhttp=false;
            }
        }
    }

    return xmlhttp;
}

function getCity(countryId) {       

    var strURL="findCountry.php?country="+countryId;
    var req = getXMLHTTP();

    if (req) {

        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                // only if "OK"
                if (req.status == 200) {                        
                    document.getElementById('citydiv').innerHTML=req.responseText;                      
                } else {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                }
            }               
        }           
        req.open("GET", strURL, true);
        req.send(null);
    }       
}
</script>

Вот часть php:

    <?php
$username = $_SESSION[ 'username' ];
$sql = $conn->query( "SELECT * FROM users WHERE username='$username' " );

if ( $sql->num_rows > 0 ) {
    // output data of each row
    while ( $info = $sql->fetch_assoc() ) {
        echo '

                        <select id="country" name="country" onchange="getCity(this.value)"  required>
                <option value="" selected disabled hidden>Country</option>';
        $sql2 = $conn->query( "SELECT * FROM world_countries ORDER BY country_name ASC" );
        // output data of each row
        if ( $info[ 'country' ] != null ) {
            echo '<option value="' . $info[ "country" ] . '" selected>' . $info[ "country" ] . '</option>';
        }
        while ( $row = $sql2->fetch_assoc() ) {
            echo '<option value="' . $row[ "cc_iso" ] . '">' . $row[ "country_name" ] . '</option>';
        }

        echo '<div id="citydiv"><select name="city"><option>Select Country First</option></select></div>';
    }}
        ?>

А вот findCountry.php:

* +1016 *

Answer 1

Вы должны добавить второй параметр GET в ваш запрос ajax, чтобы получить параметры с уже выбранным, например:

function getCity(countryId, selected = "none") {
    var strURL="findCountry.php?country="+countryId+"&selected="+selected;
    var req = getXMLHTTP();
    //...

В вашем PHP добавьте выбранный правильный параметр:

<? 
require_once("config.php");
$country=$_GET['country'];
$selected = $_GET['selected'];
$sql=$conn->query("SELECT * FROM world_cities WHERE id='$country' ORDER BY full_name_nd ASC");
if ( $sql->num_rows > 0 ) {
echo '
<select name="cities">
<option>Select City</option>';
while($row=$sql->fetch_assoc()) { 
$status = "";
if($selected!="none" && $row['full_name_nd'] == $selected) //apply selection
    $status = "selected";
echo '<option value="'.$row['full_name_nd'].'" '.$status.'>'.$row['full_name_nd'].'</option>';
}
echo '</select>';
} else {
echo 'error';
}
$conn->close();

Теперь вы сможете вызывать свою функцию, передавая выбранный город при загрузке страницы