使用 ajax、sql 和 php 的动态下拉列表
Posted
技术标签:
【中文标题】使用 ajax、sql 和 php 的动态下拉列表【英文标题】：Dynamic Drop Down lists using ajax, sql and php 【发布时间】：2013-11-14 09:17:51 【问题描述】：我有一个运行良好的代码。它根据上一个列表填充下拉列表，但存在问题。
在<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>
【问题讨论】：
存储对应的“id”有什么问题。您可以使用该“id”获取名称。 表单将数据存储在数据库中，其中国家名称显示为 1 或 2 或 3 等而不是名称。现在从该数据库中运行了许多查询以生成显示国家名称、城市名称等的搜索结果。这就是问题出现的地方。如果当前脚本可以存储名称而不是 id，它将节省大量工作。非常感谢。 当发送数据到后端脚本存储数据到数据库时，在ajax请求本身中发送国家/州/城市的名称。你能发布那个脚本吗？ 谢谢萨米尔。数据通过页面顶部的 ajax.php 脚本发送。 在 urlurl: "ajax.php?index="+index+"&id="+id, 中发送数据时，您可以将 name 参数作为 $('#'+index+' option:selected').text() 发送
【参考方案1】：
你可以让脚本做你想做的事
-
显示 id 作为数据属性。 -->
Ajax->show_result()
在 ajax 调用中将该属性用于 id 参数。 --> 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 参数是表单中的选项元素，我们需要进行补偿以使 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 而不是他们的名字。
【讨论】：
【参考方案2】：我的英语不好，所以我就写一些我从你那里得到的东西。
1: You want to get a dropdown list depend on the index
2: You want to shown selected options depend on the id
首先，您的代码很糟糕。 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。
就是这样。再次为我糟糕的英语感到抱歉（我的中文说得很好:)）
【讨论】：
以上是关于使用 ajax、sql 和 php 的动态下拉列表的主要内容，如果未能解决你的问题，请参考以下文章
如何根据使用 jQuery/AJAX 和 PHP/MySQL 选择的第一个下拉列表填充第二个下拉列表？
将下拉菜单中的相关信息显示到文本框中（来自 SQL 数据库，使用 PHP、AJAX 和 HTML）