1

Ajax を使用して 2 番目の選択タグの値を設定しましたが、2 番目の選択タグの選択後に表示される 3 番目の選択タグを設定できません。何が悪いのか提案してください。

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

解決策は、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 に答える
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 に答える