繁体   English   中英

PHP和Ajax多个下拉菜单onChange功能

[英]Php and ajax multiple dropdown menu onChange function

我想根据所选州来选择省。 该选项工作正常,但是当我根据省选项添加新的下拉列表框时,所有其他选项均不起作用,并且不基于所选下拉列表显示数据库中的所有值菜单... [![在此处输入图片描述] [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文件?

请参阅我无法检查所有代码。 我有我的代码。 只是通过它。 尝试使用这个。 少动脑子。 并且,您将不会有任何问题。 〜@imDEnam

View.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);
    }});
});

AjaxSelectStores.php

<?
include("open-db-connection.php");
extract($_GET);

$RecentMonth=date("F");
?>

<div class='row'>
    <div class='col-md-2'><label>Select Store</label></div>
    <div class='col-md-4'>
        <select class='form-control' name='StoreNo'>
            <option value="">Select Store</option>
            <?
            $QueryStore=mysql_query("SELECT * FROM AubreeStores WHERE AStoreCity='$CityNo' ");
            while($RowS=mysql_fetch_array($QueryStore))
            {?>
            <option value="<?echo $RowS['AStoreNo'];?>"><?echo $RowS['AStoreName'];?></option>
            <?}?>
        </select>
    </div>
</div>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM