php - 我需要帮助完成这个 3 级动态下拉列表

标签 php mysql ajax dynamic location

我知道还有很多其他主题基于此主题。我的代码基于其中一个。它很好用。唯一的问题是它是一个 2 级下拉菜单。我需要添加另一个下拉菜单,以便完成我的国家、地区、城市列表。

如果您可以查看我的代码并建议我如何添加第 3 个下拉列表(城市),那就太好了。

index.php

<html>
<head>  
    <script>
        function showHint(str) {
            var xmlhttp;
            if (str.length==0) {
            document.getElementById("regiondiv").innerHTML="";
            return;
            }
            if (window.XMLHttpRequest) {
            xmlhttp=new XMLHttpRequest();
            }
            else {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("regiondiv").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","ajax.php?country="+str,true);
            xmlhttp.send(null);
        }
    </script>
</head>
<body>  

    <div class="field">
        <label for="cat">Country</label>
        <select id="country" name="country" onChange="showHint(this.value);" required >

            <option value="0">--Select Country--</option>

            <?php  
                $getCountry = DB::getInstance()->query("SELECT * FROM countries");

                if(!$getCountry->count()) {

                    echo 'No Country found!';

                } else {

                    foreach($getCountry->results() as $row) {

                        $country_id     =   escape($row->countryId);
                        $country_name   =   escape($row->countryName);

                 ?><option value="<?php echo $country_id; ?>" ><?php echo $country_name; ?></option><?php

                    }
                }
            ?>


        </select>

    </div>

    <label for="cat">Region</label>
    <div id="regiondiv">
        <select name="region" id="region">
        <option>--Select State--</option>
        <option></option>
    </div>

</body>
</html>

ajax.php

<?php require_once 'core/init.php';

$country_id  =  escape(Input::get('country'));

$select_region = DB::getInstance()->get('regions', array('countryId', '=', $country_id));

    if(!$select_region->count()) {

        echo 'No Country found!';

    } else {

    ?><select name="region" id="region"><?php   

        foreach($select_region->results() as $row) {

            $region_id          =   escape($row->regionId);
            $region_name        =   escape($row->regionName);

        ?><option value="<?php echo $region_id; ?>" ><?php echo $region_name; ?></option><?php

        }
    ?></select><?php        
    }

最佳答案

我真的不明白你的问题?您基本上是在问如何为城市再次为地区做您现在正在做的事情?

就像创建一个 cityAjax.php:

<?php require_once 'core/init.php';

$region_id  =  escape(Input::get('region'));

$select_city = DB::getInstance()->get('citys', array('regionId', '=', $region_id));

    if(!$select_city->count()) {

        echo 'No City found!';

    } else {

    ?><select name="city" id="city"><?php   

        foreach($select_city->results() as $row) {

            $city_id          =   escape($row->cityId);
            $city_name        =   escape($row->cityName);

        ?><option value="<?php echo $city_id; ?>" ><?php echo $city_name; ?></option><?php

        }
    ?></select><?php        
    }

对不起,你的问题没有意义......


更新:

啊,我想我明白你的问题了。您不了解如何让生成的区域选择加载城市部分。

好的,你可以这样做:

  • 如上文所述,您首先需要为检索城市的逻辑创建一个新的 ajax.php。从一个文件处理所有内容会更好,但为了简单起见,我们只使用第二个 php 文件。

  • 您还需要扩展基本 html 文件并为城市添加占位符:

    ... 地区 --选择州--

    <label for="cat">Cities</label>
    <div id="citydiv">
        <select name="city" id="city">
        <option>--Select State--</option>
        <option></option>
    </div>
    

    ...

  • 您还需要添加一个 javascript 函数来填充这个新的占位符:

:

function showHint(str) {   
    ...        
    xmlhttp.open("GET","ajax.php?country="+str,true);
    xmlhttp.send(null);
    ...   
}

function showCity(str) {
    var xmlhttp;
    if (str.length==0) {
        document.getElementById("citydiv").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    } else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("citydiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","cityAjax.php?region="+str,true);
    xmlhttp.send(null);
}

: - 最后但同样重要的是,您需要扩展现有的 ajax.php 代码,以便在选择区域时调用新的 javascript 函数:

...
?><select name="region" id="region" onChange="showCity(this.value);" required><?php   

        foreach($select_region->results() as $row) {

            $region_id          =   escape($row->regionId);
            $region_name        =   escape($row->regionName);

        ?><option value="<?php echo $region_id; ?>" ><?php echo $region_name; ?></option><?php

        }
?></select><?php 
...

希望对您有所帮助!

关于php - 我需要帮助完成这个 3 级动态下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22888777/

相关文章:

PHP - 将对象打印到后端功能的控制台/日志

javascript - 如何将 php 代码推送到 js 变量?

PHP if/else 语句插入 MYSQL 表不起作用

mysql - 当 substr 大于 1 时获取列的所有实例

javascript - 如何从异步调用返回响应?

jquery - 我在一项考试中遇到 ajax 调用问题

javascript - `Firefox`扩展无法发送跨域请求

PHP 将 mySQL 结果输出到可排序列中

phpmyadmin 警报 "This operation could take a long time. Proceed anyway?"

javascript - 按传单喜欢 Laravel 5.2 订购