[英]Dynamic Drop Down lists using ajax, sql and php
我有一個運行良好的代碼。 它根據前一個列表填充下拉列表,但是存在問題。 在<option value ="">
字段的html表單中,它顯示“ id”,它是一個數字值,而不是“ name”。 有人可以告訴我如何顯示“名稱”而不是值。 實際的問題是,當它在sql數據庫中保存數據時,它存儲的是國家或州或城市的相應“ id”,而不是其“名稱”。
這是我正在使用的代碼。 我嘗試更改ajax.php中的最后一行echo "<option value='$entity_id'>$enity_name</option>";
echo "<option value='$entity_name'>$enity_name</option>";
但是動態下拉列表不起作用,因為它們依賴於“ id”。 非常感謝您的幫助。
ajax.php
<?php
/* File : ajax.php
* Author : Manish Kumar Jangir
*/
class AJAX {
private $database = NULL;
private $_query = NULL;
private $_fields = array();
public $_index = NULL;
const DB_HOST = "localhost";
const DB_USER = "admin";
const DB_PASSWORD = "admin";
const DB_NAME = "disciples";
public function __construct(){
$this->db_connect(); // Initiate Database connection
$this->process_data();
}
/*
* Connect to database
*/
private function db_connect(){
$this->database = mysql_connect(self::DB_HOST,self::DB_USER,self::DB_PASSWORD);
if($this->database){
$db = mysql_select_db(self::DB_NAME,$this->database);
} else {
echo mysql_error();die;
}
}
private function process_data(){
$this->_index = ($_REQUEST['index'])?$_REQUEST['index']:NULL;
$id = ($_REQUEST['id'])?$_REQUEST['id']:NULL;
switch($this->_index){
case 'country':
$this->_query = "SELECT * FROM countries";
$this->_fields = array('id','country_name');
break;
case 'state':
$this->_query = "SELECT * FROM states WHERE country_id=$id";
$this->_fields = array('id','state_name');
break;
case 'city':
$this->_query = "SELECT * FROM cities WHERE state_id=$id";
$this->_fields = array('id','city_name');
break;
default:
break;
}
$this->show_result();
}
public function show_result(){
echo '<option value="">Select '.$this->_index.'</option>';
$query = mysql_query($this->_query);
while($result = mysql_fetch_array($query)){
$entity_id = $result[$this->_fields[0]];
$enity_name = $result[$this->_fields[1]];
echo "<option value='$entity_id'>$enity_name</option>";
}
}
}
$obj = new AJAX;
?>
index.html
<html xmlns="http://www.w3.org/1999/xhtml"><head profile="http://gmpg.org/xfn/11">
<head>
<title>Country State City Dependent Dropdown using Ajax</title>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
load_options('','country');
});
function load_options(id,index){
$("#loading").show();
if(index=="state"){
$("#city").html('<option value="">Select city</option>');
}
$.ajax({
url: "ajax.php?index="+index+"&id="+id,
complete: function(){$("#loading").hide();},
success: function(data) {
$("#"+index).html(data);
}
})
}
</script>
</head>
<body>
<div style="width:800px; margin:auto;padding-top:100px;">
<h1>Country,State,City dynamic dependent dropdown using Ajax and Jquery</h1>
<form>
<label>Select Country</label>
<select id="country" name="country" onchange="load_options(this.value,'state');">
<option value="">Select country</option>
</select>
<label>Select State</label>
<select id="state" name="state" onchange="load_options(this.value,'city');">
<option value="">Select state</option>
</select>
<label>Select city</label>
<select id="city" name="city">
<option value="">Select City</option>
</select>
<img src="loader.gif" id="loading" align="absmiddle" style="display:none;"/>
</form>
</div>
</body>
</html>
您可以通過該腳本來執行所需的操作
Ajax->show_result()
load_options()
load_options()
this.value
對於帶有cahages的ajax查詢是錯誤的,因為它是一個名稱,但是this
仍然具有id作為數據屬性。
<select id="country" name="country"
onchange="load_options(this, 'state');">
<option value="">Select country</option>
</select>
由於id參數是表單中的option元素,因此我們需要進行補償以使id正確。
function load_options(id,index){
...
that = $(id).find(":selected");
id = that.data('realid');
$.ajax({
url: "ajax.php?index="+index+"&id="+id,
...
讓value屬性保留名稱,但保留id。
public function show_result(){
...
while ($result = mysql_fetch_array($query)){
...
printf( '<option data-realid="%s" value="%s">%s</option>',
$entity_id,
$enity_name,
$enity_name );
這應該可以回答您的問題,並且取決於表單的提交和存儲方式,它可以解決您的問題。 但是,我對此表示懷疑,因為您忽略了向我們展示的部分可能希望獲得州和城市的ID,而不是其名稱。
我的英語不好,所以我只寫一些從你那里得到的東西。
1: You want to get a dropdown list depend on the index
2: You want to shown selected options depend on the id
FirstLy,您的代碼很糟糕。 php代碼只是嘗試獲取您需要的數據,為什么還要混入html?
讓我們嘗試解決第一個難題,獲得一個下拉列表。 您應該只讓php代碼獲取所需的數據,所以最好修改php函數show_result,我想這樣寫:
public function show_result(){
$tmpData = array();
$i = 0;
$query = mysql_query($this->_query);
while($result = mysql_fetch_array($query)){
$id = $result[$this->_fields[0]];
$enity_name = $result[$this->_fields[1]];
$tmpData[$i]['id'] = $id;
$tmpData[$i]['name'] = $enity_name;
}
return $tmpData; //here it saves data which you want to shown in drop down list
}
然后在文件ajax.php的末尾,
$obj = new AJAX;
echo json_encode($obj->show_result());
然后在js腳本中,嘗試解析從ajax.php獲得的數據,它是一個json字符串,其中包含id和名稱。 在此處生成下拉選擇器的選項。
function load_options(id,index){
$("#loading").show();
if(index=="state"){
$("#city").html('<option value="">Select city</option>');
}
$.ajax({
url: "ajax.php?index="+index, //do not pass id
complete: function(){$("#loading").hide();},
success: function(data) {
var jsonObj = eval('('+data+')');
var selected = false;
var options = '';
for(jsonObj in eachData){
if(eachData.id == id)
selected = true; // shown selected if it's the right option you want to see
options += '<option value="'+eachData.id+'"'+selcted?"selected":""+'>'+eachData.name+'</option>';
selected = false;
}
$("#"+index).html(options);
}
})
}
那么您將得到一個下拉列表。 我只是編寫這些代碼來指導您,而我沒有調試和測試它們,而是嘗試以下方法:從php獲取數據,在頁面中將其顯示為html。
就是這樣。 再一次對我的英語不好表示抱歉(我的中文說得很好:))
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.