Php和ajax多个下拉菜单onChange函数

时间:2015-08-27 15:07:40

标签: javascript php ajax

我想根据所选的州选择省份。此选项工作正常,但是当我为区域添加一个新的下拉框时,依赖于省选项,等等,所有其他选项都不起作用,并且显示数据库中的所有值而不是基于所选的下拉列表menu ... [![在此处输入图像说明] [1]] [1]

include.php代码:

<?php
    $con=mysql_connect('localhost','root','') or die('Mysql not connected');
    mysql_select_db('location',$con) or die('DataBase not connected');
?>
<html>
    <head>
        <script type="text/javascript" src="js/ajax.js"></script>
        <script type="text/javascript" src="js/ajax1.js">
        </script>
    </head>
    <body>
        <h1>Address<br/></h1>
        <form>
        <select name="state" style="padding:10px;width:200px;font-size:20px;" onChange="display(this.value)">
        <option value="" selected="selected">-- Select Country --</option>
        <?php
            $query1="select * from tbl_state";
            $query1_result=mysql_query($query1)or mysql_error();
            while($row=mysql_fetch_array($query1_result))
            {
        ?>
        <option value="<?php echo $row['id']; ?>"><?php echo $row['state_name']; ?></option>
        <?php
            }
        ?>
        </select>

        <div id="show_city">
        <select name="city"  style="padding:10px;width:200px;font-size:20px; " onChange="display1(this.value)">
        <option value="" selected="selected">-- Select Province --</option>
        </select>
        </div>

        <br>
        <div id1="show_Dist">
        <select name="dist"  style="padding:10px;width:200px;font-size:20px;">

        <option value="" selected="selected">-- Select Dist --</option>

        <?php
            $query="select * from tbl_dist";
            $query_result=mysql_query($query)or mysql_error();
            while($row=mysql_fetch_array($query_result))
            {
        ?>
        <option value="<?php echo $row['Dist_id']; ?>"><?php echo $row['Dist_Name']; ?></option>
        <?php
            }
        ?>
        </select>
        </div>

        <br>
        <div id1="show_Dist">
        <select name="dist"  style="padding:10px;width:200px;font-size:20px;">
        <option value="" selected="selected">-- Select Tehsil --</option>
        <br>
        <?php
            $query="select * from tbl_tehsil";
            $query_result=mysql_query($query)or mysql_error();
            while($row=mysql_fetch_array($query_result))
            {
        ?>
        <option value="<?php echo $row['tehsil_id']; ?>"><?php echo $row['tehsil_Name']; ?></option>
        <?php
            }
        ?>
        </select>
        </div>

        <br>
        <div id1="show_UC">
        <select name="dist"  style="padding:10px;width:200px;font-size:20px;">
        <option value="" selected="selected">-- Select Union Concil--</option>
        <br>
        <?
            $query="select * from tbl_tehsil";
            $query_result=mysql_query($query)or mysql_error();
            while($row=mysql_fetch_array($query_result))
            {
        ?>
        <option value="<?php echo $row['tehsil_id']; ?>"><?php echo $row['tehsil_Name']; ?></option>
        <?php
        ?>
        </select>
        </div>

        <br>
        <div id1="show_Villages">
        <select name="dist"  style="padding:10px;width:200px;font-size:20px;">
        <option value="" selected="selected">-- Select Villages--</option>
        <br>
        <?php
            $query="select * from tbl_tehsil";
            $query_result=mysql_query($query)or mysql_error();
            while($row=mysql_fetch_array($query_result))
            {
        ?>
        <option value="<?php echo $row['tehsil_id']; ?>"><?php echo $row['tehsil_Name']; ?></option>
        <?php
            }
        ?>
        </select>
        </div>

        </form>

    </body>
</html>

getcity代码:

<?php
    $con=mysql_connect('localhost','root','') or die('Mysql not connected');
    mysql_select_db('location',$con) or die('DataBase not connected');

    $state_id=$_REQUEST['state_id'];

    $query="select * from tbl_city where state_id='$state_id'";

?>
<select name="city"  style="padding:10px;width:200px;font-size:20px;">
<option value="" selected="selected">-- Select city --</option>
<?php
    $query_result=mysql_query($query)or mysql_error();
    while($row=mysql_fetch_array($query_result))
    {
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['city_name']; ?></option>
<?php
    }
?>

</select>

getdist.php代码:

<?php
    $con=mysql_connect('localhost','root','') or die('Mysql not connected');
    mysql_select_db('location',$con) or die('DataBase not connected');

    $city_id=$_REQUEST['city_id'];

    $query="select * from tbl_Dist where city_id='$city_id'";
    echo "Error";
?>
<select name="city"  style="padding:10px;width:200px;font-size:20px;">
<option value="" selected="selected">-- Select Dist --</option>
<?php
    $query_result=mysql_query($query)or mysql_error();
    while($row=mysql_fetch_array($query_result))
    {
?>
<option value="<?php echo $row['Dist_id']; ?>"><?php echo $row['Dist_Name']; ?></option>
<?php
    }
?>
</select>

ajax文件:

// JavaScript Document
var XMLHttpRequestObject=false;
function display(state_id)
{
    if(window.XMLHttpRequest)
    {
    XMLHttpRequestObject=new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
    XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
    } 
    XMLHttpRequestObject.onreadystatechange=function()
    {
    if (XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200)
    {
    document.getElementById("show_city").innerHTML=XMLHttpRequestObject.responseText;
    }
    }
    XMLHttpRequestObject.open("GET","getcity.php?state_id="+state_id,true);
    XMLHttpRequestObject.send();
}

ajax1文件:

var XMLHttpRequestObject=false;

function display1(dist_id)
{
    if(window.XMLHttpRequest)
    {
    XMLHttpRequestObject=new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
    XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
    } 
    XMLHttpRequestObject.onreadystatechange=function()
    {
    if (XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200)
    {
    document.getElementById("show_Dist").innerHTML=XMLHttpRequestObject.responseText;

    }
    }
    XMLHttpRequestObject.open("GET","getdist.php?city_id="+city_id,true);
    XMLHttpRequestObject.send();

}

如何正确使用AJAX文件?

1 个答案:

答案 0 :(得分:0)

请参阅我无法完成所有代码。我有我的代码。只是通过它。 试试这个。使用小脑袋。而且,你不会有任何问题。 〜@ imDEnam

<强> View.php

IntMatrix

<强> AjaxSelectStores.php

<select class='form-control City' name='StoreCity' required>
    <option value="">Select City</option>
    <?
    $QueryCity=mysql_query("SELECT * FROM AubreeCities");
    while($RowCt=mysql_fetch_array($QueryCity))
    {?>
    <option value="<?echo $RowCt['ACityNo'];?>"><?echo $RowCt['ACName'];?></option>
    <?}?>
</select>
<div class='Stores'>
   //Here, we will show all details which is coming from AjaxSelectStores.php Page..
</div>


**Ajax Call**
$('.City').change(function(){
    var CityNo= $('.City').val();
    $.ajax({url:"AjaxSelectStores.php?CityNo="+CityNo,cache:false,success:function(result){
        $('.Stores').html(result);
    }});
});