jQuery和Auto-populat选择 [英] jQuery and Auto-populat selects
问题描述
我有一个简单的页面,我可以选择一个客户端,然后我选择autopopulate到属于客户端的项目。我使用PHP / MySQL来提取结果。
I have a simple page where I can select a client, then once I chose that autopopulate to the projects that belong to the client. I am using PHP/MySQL to pull the results.
我看了一眼: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery -ajax / 但我认为从页面上的两个字段开始。我试图重做代码,但没有那么好。
I took at a look at this: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/ but I think that starts with both fields on the page. I tried to rework the code but didn't come out that well.
var client_id = $('#c_id').val();
$.getJSON("../inc/get-projects.php", {id: client_id}, function(data){
projects = $('#p_id');
projects.empty();
$.each(data, function() {
var option = $('<option/>').attr('value', this.id).text(this.name);
projects.append(option);
});
});
PHP:
<?php
include "config.inc.php";
$sth = mysql_query(
sprintf(
"SELECT c_id,p_id,p_title FROM projects WHERE c_id = %s",
mysql_real_escape_string($_GET['id'])
)
);
$projects = array();
while($r = mysql_fetch_assoc($sth)) {
$projects[] = array('id' => $r['p_id'], 'name' => $r['p_title']);
}
print json_encode($projects);
exit;
?>
推荐答案
如果你有这样的HTML:
If you have HTML like this:
<select id='clients'>...</select>
<select id='projects'>...</select>
你可以拥有这样的jQuery代码:
You can have jQuery code like this:
$(document).ready(function() {
var $clients = $('#clients');
$clients.change(function() {
var client_id = $clients.val();
$.getJSON("getProjects.php", {id: client_id}, function(projects) {
$projects = $('#projects');
$projects.empty();
$.each(projects, function() {
var option = $('<option/>').attr('value', this.id).text(this.name);
$projects.append(option);
});
});
});
});
然后让getProjects.php返回如下内容:
And then have getProjects.php return something like:
$sth = mysql_query(
sprintf(
"SELECT * FROM projects WHERE client_id = %s",
mysql_real_escape_string($_GET['id'])
)
);
$projects = array();
while($r = mysql_fetch_assoc($sth)) {
$projects[] = array('id' => $r['id'], 'name' => $r['name']);
}
print json_encode($projects);
exit;
我还没有测试过所有这些,但它或多或少都是你想要的,我想。
I haven't tested all of this, but it is more or less what you want, I think.
编辑 - 经过测试和工作,显然它可能不是您需要的,但它可以让您了解如何去做。希望它有所帮助。
edit - Tested and works, obviously it might not be exactly what you need but it gives you an idea of how to go about it. Hope it helps.
编辑2 - 您的代码存在问题:
edit 2 - The problem with your code is here:
$.getJSON("../inc/get-projects.php", {id: client_id}, function(projects){
projects = $('#p_id');
projects.empty();
$.each(projects, function() {
var option = $('<option/>').attr('value', this.id).text(this.name);
projects.append(option);
});
});
您正在覆盖传入此处的项目
在第二行使用项目
。我在我的代码中使用 $
来区分这两者,这可能不是最好的方法。要解决此问题,请将代码更改为:
You are overwriting the projects
passed into the function with the projects
in the 2nd line. I used a $
in my code to differentiate the two, which was admittedly perhaps not the best of ways. To fix, change the code to this:
$.getJSON("../inc/get-projects.php", {id: client_id}, function(data){
projects = $('#p_id');
projects.empty();
$.each(data, function() {
var option = $('<option/>').attr('value', this.id).text(this.name);
projects.append(option);
});
});
这篇关于jQuery和Auto-populat选择的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!