Question

我有两个下降。当我选择第一个。应根据第一个选择的值从数据库中填充第二个。我不想提交然后获取值，所以基本上没有页面刷新。我需要jquery和Ajax吗？

Answer 1

你没有需要 jquery，但它让ajax更容易！

此外，您不需要 ajax，但如果您不使用它，则必须在初始页面加载时为第二个组合加载整个数据库。

Answer 2

虽然jQuery和AJAX并不是严格要求的，但如果你想快速做到这一点并且未来的开发人员知道发生了什么，他们就是这样。第一个下拉列表应触发onChange以通过AJAX在JSON列表中拉出第二个下拉列表的内容并自动填充第二个下拉列表。

Answer 3

如果您已经拥有页面上的数据，那么您不需要jQuery，也不需要AJAX。

但是，如果您有大量数据，建议使用AJAX。

Answer 4

Aditya ...看看这个AJAX Triple DropDown会不会对你有所帮助为我学习教程（Jason Kraft - info@inks-etc.org）。我还在学习 AJAX，并开始学习JQUERY，所以我的球赛还没有结束。

<强> ajax_statecity_index.php

<html>
<head>
<title>Inks Etc. Triple Ajax Dropdown List</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
// Inks Etc. Ajax dropdown code with php
// Roshan Bhattarai - nepaliboy007@yahoo.com
// If you have any problem contact me at http://roshanbh.com.np
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 getState(country_ID) {
    <!--?country= comes from the table "country" not the column "country_name"--
>
    var strURL="../AJAX/ajax_findstate.php?country="+country_ID;  //+country_ID
is a column from the Table: states
    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;
                    //alert("Selected Country")
                } 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) {
    //?country= comes from the table name of "country" not the column name 
"country_name"
    var strURL="../AJAX/ajax_findcity.php?
country="+country_ID+"&states="+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;
                    //alert("Selected State");
                } else {
                    alert("There was a problem while using
XMLHTTP:\n" + req.statusText);
                }
            }               
        }           
        req.open("GET", strURL, true);
        req.send(null);
    }

}
</script>
</head>
<body>
<form method="post" action="" name="form1">
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150">Country</td>
    <td width="150">
    <select name="country" onChange="getState(this.value)">
        <option value="">Select Country</option>
        <option value="1">USA</option>
        <option value="2">Canada</option>
        <!--<option value="3">Brother</option>
        <option value="4">Canon</option>
        <option value="5">Dell</option>
        <option value="6">Epson</option>
        <option value="7">HP</option>
        <option value="8">Lexmark</option> -->
    </select>
 </td>
 </tr>
 <tr style="">
    <td>State</td>
    <td>
    <div id="statediv">
        <select name="states">
            <option>Select State</option>
        </select>
    </div>
   </td>
  </tr>
  <tr style="">
   <td>City</td>
   <td>
    <div id="citydiv">
        <select name="cities">
            <option>Select City</option>
        </select>
    </div>
  </td>
 </tr>
</table>
</form>
</body>
</html>

**ajax_findstate.php**

<?php
//the $_GET name of country is the dbtable name
$country=intval($_GET['country']);
include "../SearchEngine/dbc_work2014.php";<!--this is where I keep my phpmyadmin entry 
of dbname, dbpass, dbhost, dblocal and save it in a separate file so include in any
file -->

$query="SELECT `id`,`state_name`, `country_ID` FROM states WHERE country_ID='$country'";
$result=mysqli_query($dbc,$query) or die(mysqli_error($dbc));

?>
<select name="states" onchange="getCity(<?=$country?>,this.value)">
<option>Select State</option>
<?
while($row=mysqli_fetch_array($result))
    {
?>
        <option value=<?=$row['id']?>>
            <?=$row['state_name']?>
        </option>
<?
    }
?>
</select>

**ajax_findcity.php**

<?php
session_start();
//echo "{$_SESSION['username']}";
?>
 <?php
 $countryId=intval($_GET['country']);
 $stateId=intval($_GET['states']);
 include "../SearchEngine/dbc_work2014.php";

 //$_SESSION['username'] = $username;// which is $_POST['username']
 //$_SESSION['password'] = $password;// which is $_POST['password']

$query="SELECT `id`,`city_name` FROM cities WHERE country_ID='$countryId' AND
state_ID='$stateId'";
$result=mysqli_query($dbc, $query)or die(mysqli_error($dbc));

//$sql = "UPDATE `SignUp` SET `Tampa` WHERE `id`='1'";
//echo $sql;
?>

<select name="cities">
<option>Select City</option>

<?php
    while($row=mysqli_fetch_array($result))
    {
?>
<option value><?=$row['city_name']?></option>

<? }

?>
</select>

Place 3 Tables in a phpmyadmin database:

Table:  Country            
id_country    country_name  
1             USA
2             Canada
3             India           

Table: State
id_state   state_name id_country 
1          Florida
2          Quebec
3          Maharashtra


Table:  City
id_city   city_name   id_state   id_country
1         Sarasota    1          1
2         Montreal    2          2
3         Mumbai      3          3

Any questions email Jason Kraft a text...but I am far from being near perfect in fact I
feel quite elementary with all that I need to know.  

Good Luck...Aditya

两个动态下降

4 个答案: