带有价格更新的AJAX多个下拉列表

时间:2012-04-24 12:50:30

标签: jquery sql ajax

有人可以帮我解决这个问题,我错过了一些东西,但无法弄清楚是什么。当您选择第一个列表中的一个项目时,它会弹出下一个框但是没有选项可供选择,而第三个选项也是如此,尽管我甚至没有让这个框出现。

我总共需要大约10个下拉列表,并且在选择每个选项后使用sql表中的price列更新底部的价格(我不知道如何执行此操作)所以所有的帮助都将是好的,现在看这个至少4个小时了,我什么都没有。

由于

这是html:

<body>
<select style="width: 150px;" name="country" id="add-event-dialog-country" onchange="getState(this.value)">
                <?php
                    echo "<option selected='selected' disabled='disabled'> Select Country</option>";
                    $result = mysql_query("SELECT DISTINCT country FROM country");
                    while($row = mysql_fetch_array($result)){
                       echo "<option value='".$row['country']."'>".$row['country']."</option>";
                    }
                ?>
           </select>
           <p id="statediv">
           <select style="width: 150px;" name="add-event-dialog-state" id="add-event-dialog-location" disabled="disabled">
                <option>Select State</option>
           </select>
           </p>
           <p id="citydiv">
           <select style="width: 150px;" name="add-event-dialog-city" id="add-event-dialog-city" disabled="disabled">
                <option>Select City</option>
           </select>
           </p>

Price =<br>
VAT = <br>
Total Price = <br>
</body>

这是js脚本:

<script language="javascript" type="text/javascript">
function getXMLHTTP() { 
    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 getState(country_Id) {     

    var strURL="findState.php?country="+country_Id;
    var req = getXMLHTTP();

    if (req) {

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

function getCity(country_Id,state_id) {     

    var strURL="findCity.php?country_name="+country_Id+"&state_name="+state_Id;
    var req = getXMLHTTP();

    if (req) {

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

这是findState.php

<?php 
include 'classes.php';

$country = $_GET['country'];

$query="SELECT state_name FROM state WHERE country_id='$country'";
$result=mysql_query($query) or die(mysql_error());

?>
<select style="width: 150px;" id="add-event-dialog-location" name="add-event-dialog- location" onchange="getZone('<?=$country?>',this.value)">
<option selected='selected' disabled='disabled'>Select State</option>
<?php 
while($row = mysql_fetch_array($result)){
echo "<option value='".$row['state_name']."'>".$row['state_name']."</option>";}
?>
</select>

这是findCity.php

<?php 
include 'classes.php';

$country_id = $_GET['country'];
$state_Id = $_GET['state'];

$query="SELECT city_name FROM city WHERE country_id='1' AND state_id='1'";
$result=mysql_query($query) or die(mysql_error());

?>
<select style="width: 150px;" id="add-event-dialog-location" name="add-event-dialog- location" onchange="getZone('<?=$country?>',this.value)">
<option selected='selected' disabled='disabled'>Select State</option>
<?php 
while($row = mysql_fetch_array($result)){
echo "<option value='".$row['city_name']."'>".$row['city_name']."</option>";}
?>
</select>

我的SQL数据库有3个表

第1个表名为country 3列 id,国家和价格

第二个表名为4列状态 id,country_id,state_name和price

和第3个表称为5列的城市 id,country_id,state_id,city_name和price

1 个答案:

答案 0 :(得分:0)

在findState.php和findCity.php中,当选择列表发生变化时,你会调用javascript函数getZone吗?我无法看到你已经在任何地方声明了这个功能。

并添加具有相同ID的州和城市选择列表。我不认为这是你问题的原因,但可能会在以后发生。

编辑:

您似乎在名为country_name的变量中提交了国家/地区ID,但是您尝试按国家/地区在php中访问它,而findCity也是如此

编辑2:

尝试将findstate.php更改为此

<?php 
include 'classes.php';

$country = $_GET['country'];

$query="SELECT state_name FROM state WHERE country_id='$country'";
$result=mysql_query($query) or die(mysql_error());

$country = "'".$country."'";
echo '<select style="width: 150px;" id="add-event-dialog-location" name="add-event-dialog- location" onchange="getZone('.$country.',this.value)">';
echo "<option selected='selected' disabled='disabled'>Select State</option>";

while($row = mysql_fetch_array($result)){
echo "<option value='".$row['state_name']."'>".$row['state_name']."</option>";}
echo "</select>";
?>

问题似乎是php无法识别您正在尝试将国家/地区ID插入到html select元素中。通过回声一切,这应该更容易。