Question

我制作了一个级联下拉列表，用于选择国家和城市（取决于所选的国家），以供用户更新其个人资料。

在早期版本中，用户可以选择国家和城市。但是由于这将是一个更新配置文件页面，所以如果数据不为空，我想显示已选择的数据。

对于国家/地区选择而言，它可以正常工作，但由于第二个Dropbox仅在第一个下拉列表中进行了选择才触发，因此无法弄清楚如何实现已选择的数据来触发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();

现在，您应该能够在页面加载时通过选定城市调用函数

在级联下拉列表中显示随时选择的数据

1 个答案: