两个动态下拉菜单

Question

I have two drop downs. 我有两个下拉菜单。 when I select the first one . 当我选择第一个。 The second one should be populated from the database based on the value selected of the first one. 第二个数据库应该根据第一个数据库的选定值从数据库中填充。 I don't want submit and then get the value , so basically no page refresh.Do I need jquery and Ajax for this? 我不想提交然后获取值，所以基本上没有页面刷新。为此我需要jquery和Ajax吗？

Answer 1

You don't need jquery, but it makes ajax much easier! 您不需要 jquery，但是它使ajax更加容易！

Also, you don't need ajax, but you would have to load the entire database for the second combo on the initial page load if you don't use it. 另外，您不需要 ajax，但是如果不使用ajax，则必须在初始页面加载时为第二个组合加载整个数据库。

Answer 2

though jQuery and AJAX aren't strictly required, they are if you want to do this quickly and in a way that future developers know what's going on. 尽管并不是严格要求jQuery和AJAX，但如果您想快速地做到这一点，并且希望以后的开发人员知道发生了什么，那么它们就是必需的。 the first drop-down should fire onChange to pull the contents of the second drop-down via AJAX in a JSON list and auto-populate the second drop-down. 第一个下拉菜单应触发onChange以通过AJAX在JSON列表中提取第二个下拉列表的内容，并自动填充第二个下拉列表。

Answer 3

Aditya...see if this AJAX Triple DropDown will be some help to you as it has been a learning tutorial for me (Jason Kraft - info@inks-etc.org). Aditya ...看看这个AJAX Triple DropDown是否会对您有所帮助，因为这对我来说是一个学习教程（Jason Kraft-info@inks-etc.org）。 I am still learning with AJAX, and beginning to learn with JQUERY, so my ball game is NOT over. 我仍在学习AJAX，并开始学习JQUERY，因此我的球类运动尚未结束。

ajax_statecity_index.php 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

Answer 4

You don't need jQuery, nor AJAX for that matter if you already have the data on the page. 如果您已经在页面上拥有数据，则无需jQuery，也不需要AJAX。

But, using AJAX is recommended if you have a large amount of data. 但是，如果您有大量数据，建议使用AJAX。

两个动态下拉菜单

问题描述

4 个解决方案

解决方案1
2 2010-12-14 23:27:33

解决方案2
2 已采纳 2010-12-14 23:29:57

解决方案3
0 2014-02-10 04:22:40

解决方案4
0 2010-12-14 23:28:31

两个动态下拉菜单

问题描述

4 个解决方案

解决方案1 2 2010-12-14 23:27:33

解决方案2 2 已采纳 2010-12-14 23:29:57

解决方案3 0 2014-02-10 04:22:40

解决方案4 0 2010-12-14 23:28:31

解决方案1
2 2010-12-14 23:27:33

解决方案2
2 已采纳 2010-12-14 23:29:57

解决方案3
0 2014-02-10 04:22:40

解决方案4
0 2010-12-14 23:28:31