Ich habe zwei Dropdown-Menüs. wenn ich den ersten auswähle. Der zweite sollte aus der Datenbank basierend auf dem ausgewählten Wert des ersten Eintrags ausgefüllt werden. Ich will nicht senden und dann den Wert, also im Grunde keine Seite aktualisieren. Benötige ich Jquery und Ajax dafür?Zwei dynamische Drop-Downs
obwohl jQuery und AJAX sind nicht unbedingt erforderlich, sie sind, wenn Sie dies schnell und auf eine Weise tun möchten, dass zukünftige Entwickler wissen, was vor sich geht. Das erste Dropdown-Menü sollte onChange auslösen, um den Inhalt des zweiten Dropdown-Menüs über AJAX in einer JSON-Liste abzurufen und das zweite Dropdown-Menü automatisch zu füllen.
Sie nicht müssen jquery, aber es macht Ajax viel einfacher!
Sie auch nicht brauchen AJAX, aber Sie müssten die gesamte Datenbank für die zweite Combo auf der ersten Seite laden, wenn Sie es nicht verwenden.
+1 für meinen Geist – skajfes
Lesen Wie gehen Sie vor, ohne die gesamte Datenbank zu laden? –
@Aditya - fragen, wie ist eine große Frage. Sie sollten sich die ajax-Funktion von jQuery ansehen: http://api.jquery.com/jQuery.ajax/ und wie Sie auf HTTP-Anfragen reagieren, Datenbanksuchen von der serverseitigen Sprache Ihrer Wahl durchführen, und dann komm mit einer neuen Frage zurück, wenn du immer noch Probleme hast. In der Zwischenzeit sollten Sie diese Antwort akzeptieren;) –
Sie benötigen weder jQuery noch AJAX, wenn Sie die Daten bereits auf der Seite haben.
Die Verwendung von AJAX wird jedoch empfohlen, wenn Sie eine große Datenmenge haben.
Aditya ... schauen Sie, ob dieses AJAX Triple DropDown Ihnen helfen wird, da es ein Lernprogramm für mich war (Jason Kraft - [email protected]). Ich lerne immer noch mit AJAX, und mit JQUERY zu lernen, damit mein Ballspiel nicht vorbei ist.
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 - [email protected]
// 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
Danke für die Richtung. Ich muss Ajax lernen, um es zu nutzen. –