[英]Two Dynamic Drop Downs
我有两个下拉菜单。 当我选择第一个。 第二个数据库应该根据第一个数据库的选定值从数据库中填充。 我不想提交然后获取值,所以基本上没有页面刷新。为此我需要jquery和Ajax吗?
您不需要 jquery,但是它使ajax更加容易!
另外,您不需要 ajax,但是如果不使用ajax,则必须在初始页面加载时为第二个组合加载整个数据库。
尽管并不是严格要求jQuery和AJAX,但如果您想快速地做到这一点,并且希望以后的开发人员知道发生了什么,那么它们就是必需的。 第一个下拉菜单应触发onChange以通过AJAX在JSON列表中提取第二个下拉列表的内容,并自动填充第二个下拉列表。
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
如果您已经在页面上拥有数据,则无需jQuery,也不需要AJAX。
但是,如果您有大量数据,建议使用AJAX。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.