1

我使用 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>
4

2 回答 2

0

在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>
于 2013-01-13T08:37:27.817 回答
0

解决方案是使用 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 才能使这种方法起作用。

于 2013-01-13T07:12:21.323 回答