Question

我使用Ajax填充第二个选择标记的值但是我无法填充第二个选择标记选择后应该出现的第三个选择标记。请说明出了什么问题。

index.php


<html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="javascript" type="text/javascript">

    function getXMLHTTP() { //function 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 getclass(clas) {       

            var strURL="findbooks.php?clas="+clas;
            var req = getXMLHTTP();

            if (req) {

                req.onreadystatechange = function() {
                    if (req.readyState == 4) {
                        // only if "OK"
                        if (req.status == 200) {                        
                            document.getElementById('booksdiv').innerHTML=req.responseText;                     
                        } else {
                            alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                        }
                    }               
                }           
                req.open("GET", strURL, true);
                req.send();
            }       
        }
        function getbooks(clas,nme) {       
            var strURL="findprice.php?clas="+clas+"&nme="+nme;
            var req = getXMLHTTP();

            if (req) {

                req.onreadystatechange = function() {
                    if (req.readyState == 4) {
                        // only if "OK"
                        if (req.status == 200) {                        
                            document.getElementById('pricediv').innerHTML=req.responseText;                     
                        } else {
                            alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                        }
                    }               
                }           
                req.open("GET", strURL, true);
                req.send();
            }

        }
    </script>
    </head>
    <body>
    <form method="post" action="" name="form1">
    <table width="60%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="150">Class</td>
        <td  width="150"><select name="class" onChange="getclass(this.value)">
        <option>select class</option>
        <?php
     for ($i=1;$i<=10;$i++)
    {
        ?>
                <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
                <?php } ?>
            </select></td>
      </tr>
      <tr style="">
        <td>Books</td>
        <td ><div id="booksdiv"><select name="Books" >
        <option>Select books</option>
            </select></div></td>
      </tr>
      <tr style="">
        <td>City</td>
        <td ><div id="pricediv"><select name="price">
        <option>Select price</option>
            </select></div></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </form>
    </body>
    </html>

findbooks.php

<?php 
    $class=$_GET['clas'];
    include "localhost.php";
    $query="SELECT * FROM books WHERE class='".$class."'";
    $result=mysql_query($query);

    ?>
    <select name="books" onchange="getbooks(<?php $class; ?>,this.value)" >
    <option>Select books</option>
    <?php 
    while($row=mysql_fetch_array($result))
     { 
     ?>
    <option><?php echo $row['name'];?></option>
    <?php 
    } 
    ?>
    </select>

findprice.php




<?php $class=$_GET['clas'];
    $name=$_GET['nme'];
    include "localhost.php";
    $query="SELECT price FROM books WHERE class='$class' AND name='$name'";
    $result=mysql_query($query);

    ?>
    <select name="price">
    <option>Select Price</option>
    <?php 
    while($row=mysql_fetch_array($result)) 
    { 
    ?>
    <option><?php $row['price'] ?></option>
    <?php } ?>
    </select>

Answer 1

解决方案是使用Jquery LIVEQUERY。 Livequery通过绑定事件或自动触发匹配元素的回调来利用jQuery选择器的强大功能，即使在页面加载后也是如此！

 $(document).ready(function() {

//Populate the third 'select' tag 'onchange' of second 'select' tag.
    $('secondSelectTagID').livequery('change', function(){
           //Add necessary code to populate third dropdown.
    });
});

注意：您必须同时包含jquery.js和jquery.livequery.js才能使用此方法。

Answer 2

在findprice.php

<?php 
$class=$_GET['clas'];
 include "localhost.php";
 $query="SELECT * FROM books WHERE class='".$class."'";
 $result=mysql_query($query);
?>
<select name="books" onchange="getbooks(<?php echo $class; ?>,this.value)" ><!--Notice the echo here-->
<option>Select books</option>
<?php 
 while($row=mysql_fetch_array($result))
 { 
?>
<option value="<?php echo $row['name'];?>"><?php echo $row['name'];?></option><!--Notice the option value here-->
<?php 
 } 
?>
</select>

并在findprice.php

<?php $class=$_GET['clas'];
$name=$_GET['nme'];
include "localhost.php";
$query="SELECT price FROM books WHERE class='$class' AND name='$name'";
$result=mysql_query($query);

?>
<select name="price" onchange="getbooks(<?php echo $class; ?>,<?php echo $name; ?>,this.value)>
<option>Select Price</option>
<?php 
while($row=mysql_fetch_array($result)) 
{ 
?>
<option><?php echo $row['price'] ?></option><!--Notice the echo here-->
<?php } ?>
</select>

使用第二个选择标记的值填充第三个选择标记，第二个选择标记使用第一个选择标记从数据库中获取其值

2 个答案: