在級聯下拉列表中顯示隨時選擇的數據

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：

<? 
require_once("config.php");
$country=$_GET['country'];
$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()) { 
echo '<option value="'.$row['full_name_nd'].'">'.$row['full_name_nd'].'</option>';
}
echo '</select>';
} else {
echo 'error';
}
$conn->close();
?>

Answer 1

您應該在ajax請求中添加第二個GET參數，以獲取已被選中的選項，例如：

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();

現在，您應該能夠在頁面加載時調用傳遞所選城市的函數