【问题标题】:Ajax dropdown list not workingAjax 下拉列表不起作用
【发布时间】:2018-05-14 14:52:55
【问题描述】:

我正在开发一个动态网站,用户可以在其中通过证明位置和专家来搜索医生,如下所示:

这是我的主页代码:

index.php

<script type="text/javascript">
    function showHint(str){
        if(str.length==0){
            document.getElementById("ddlstate").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("ddlstate").innerHTML=xmlHttp.responseText;
            }
        }
        xmlHttp.open("GET","getstate.php?q="+str,true);
        xmlHttp.send();
    }
</script>
<script type="text/javascript">
    function showHide(str){
        if(str.length==0){
            document.getElementById("ddldis").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("ddldis").innerHTML=xmlHttp.responseText;
            }
        }
        xmlHttp.open("GET","getdis.php?q="+str,true);
        xmlHttp.send();
    }
</script>

<form method="post">
    <div class="col-lg-3 form-group">
        <center>
            <img src="images/placeholder-2.png"/ width="50px;"><br>
            <label>Location</label>
        </center>
        <select id="ddlcnt" onchange="showHint(this.value)" class="form-control">
            <option value="0">-----Select Location-----</option>
            <?php 
                error_reporting(0);
                $con=mysql_connect("localhost","root","");
                mysql_select_db("doctor_db",$con);
                $sql="select * from location_tb";
                $res=mysql_query($sql);
                while($ar=mysql_fetch_array($res)){
            ?>
            <option value="<?php echo $ar[0];?>"><?php echo $ar[1];?></option>
            <?php } ?>
        </select>
    </div>
    <div class="col-lg-3 form-group">
        <center>
            <img src="images/surgeon.png"/ width="50px;">
            <!--<img src="images/stethoscope.png"/ width="50px;">--><br>
            <!-- <label>Doctors</label>-->
            <label>Specialty</label>
        </center>
        <select id="ddlstate" name="ddlstate"  class="form-control">
        </select>
    </div>
    <div class="col-lg-4 form-group">
        <div class="col-lg-10 mrg_less">
            <center>
                <img src="images/stethoscope.png"/ width="50px;"><br>
                <label>Doctors</label>
            </center>
        </div>
        <div class="col-lg-2"></div>
        <div class="col-lg-9 mrg_less">
            <select id="ddldis" name="ddldis" class="form-control"></select>
        </div>
        <div class="col-lg-2">
            <button class="search" name="search" id="search" type="submit"><i class="flaticon-magnifier-tool"></i></button>

getstate.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>AJAX</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <form>
            <option value="0">-----select specialist-----</option>
            <?php
                $con=mysql_connect("localhost","root","");
                mysql_select_db("doctor_db",$con);
                $q=$_GET["q"];
                $sql="select * from specialty_tb where lid='".$q."'";
                $res=mysql_query($sql);
                while($ar=mysql_fetch_array($res)){
                    echo "<option value=".$ar[0].">".$ar[1]."</option>";
                }
            ?>
        </form>
    </body>
</html>

getdis.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <form>
            <option value="0">-----select doctor-----</option>
            <?php
                $con=mysql_connect("localhost","root","");
                mysql_select_db("doctor_db",$con);
                $q=$_GET["q"];
                $sql="select * from doctor_details where sid='".$q."'";
                $res=mysql_query($sql);
                while($ar=mysql_fetch_array($res)){
                    echo "<option value=".$ar[0].">".$ar[1]."</option>";
                }
            ?>
        </form>
    </body>
</html>

这是我的桌子

,

问题是,当我从列表中选择位置时,我可以使用位置 ID 从该位置获取专家。但我无法获得医生名单。

例如:- 如果我选择 Kannur 的位置,我会得到表格中给出的 Kannur 的所有专家,如果我选择一个专家,比如麻醉师,我无法获得麻醉师的医生名单.根据医生详细信息中输入的数据,我应该根据提供的 sid 在第三个列表中获得“医生 1”。

有人可以帮帮我吗?

【问题讨论】:

  • 请附上sql文件
  • 你正在犯两个严重的错误。一,你使用的是mysql接口,差点被扔进垃圾箱。请改用mysqli。您设置了两个error_reporting(0);,这完全阻止了您在 php 中的调试机会。
  • 如果代码可以整理,如果无法运行,请在插入后从sn-p中删除第一行。如您所见,脚本标签不属于 JavaScript 面板
  • 我要在这里添加到列表中的第三个错误是 HTML 代码和处理逻辑的丑陋混合 - 关键字 en.wikipedia.org/wiki/IPO_model
  • 您的 getstate.phpgetdis.php 脚本都返回一个完整的 HTML 文档 - doctype、html 和 body 元素,很多。您正在尝试将这些整个文档填充到您的 select 元素中,方法是将这些请求未经修改地返回的内容分配给它们的 innerHTML ...当然这是无稽之谈。

标签: php html mysql ajax


【解决方案1】:

只有这一行有变化

 <select id="ddlstate" name="ddlstate"  class="form-control"  
onchange="showHide(this.value)" >

您需要添加 onchange 事件,它会起作用。

【讨论】:

  • 非常感谢。有效。我忘了添加 onchange="showHide(this.value)" :)
【解决方案2】:

我认为您应该附加字符串,然后通过 javascript 添加选择

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
    <form>
    <option value="0">-----select doctor-----</option>
    <?php
    $con=mysql_connect("localhost","root","");
    mysql_select_db("doctor_db",$con);
    $q=$_GET["q"];
    $sql="select * from doctor_details where sid='".$q."'";
    $res=mysql_query($sql);
    $option = '';
    while($ar=mysql_fetch_array($res))
    {
     $option .= "<option value=".$ar[0].">".$ar[1]."</option>";
    }
    echo $option;
    ?>
    </form>
    </body>
    </html>

【讨论】:

    【解决方案3】:
    need to take another div tag in index.php: 
    <div id="ddlstate_div">
    <select id="ddlstate" name="ddlstate" class="form-control">
    /////
    </select>
     </div>
    

    并更改 ajax showHint 函数:document.getElementById("ddlstate").innerHTML 替换为 document.getElementById("ddlstate_div").innerHTML

    Add below tag in getstate.php:
    
        <select id="ddlstate" name="ddlstate" onchange="showHide(this.value)" class="form-control">
    
    
            </select>
    

    【讨论】:

    • 给我们您的反馈。
    • 非常感谢。有效。我忘了添加 onchange="showHide(this.value)" :)
    猜你喜欢
    • 2015-10-08
    • 1970-01-01
    • 1970-01-01
    • 2022-11-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多