在级联下拉列表中显示容易选择的数据答案

【问题标题】：Showing readily selected data in cascade drop-down list在级联下拉列表中显示容易选择的数据
【发布时间】：2019-02-16 14:38:27
【问题描述】：

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

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

它适用于国家/地区选择，但无法弄清楚如何实现此已选择的数据以触发 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();
?>

【问题讨论】：

标签： php cascade cascadingdropdown

【解决方案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();

现在您应该可以在页面加载时调用您的函数并传递所选城市

【讨论】：