[英]jQuery and Auto-populat selects
我有一个简单的页面,可以在其中选择一个客户端,然后一旦选择了该页面,它将自动填充到属于该客户端的项目中。 我正在使用PHP / MySQL来提取结果。
我看了一下: http : //remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/,但我认为这始于页面上的两个字段。 我试图重新编写代码,但效果不佳。
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:
<select id='clients'>...</select>
<select id='projects'>...</select>
您可以使用以下jQuery代码:
$(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返回如下内容:
$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;
我还没有测试所有这些,但是我认为这或多或少是您想要的。
编辑 -经过测试并可以正常工作,显然它可能并不是您真正需要的,但是它为您提供了解决方法。 希望能帮助到你。
编辑2-您的代码存在问题:
$.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);
});
});
要覆盖projects
通过与功能projects
在2号线。 我在代码中使用$
来区分两者,这显然不是最好的方法。 要解决此问题,请将代码更改为此:
$.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);
});
});
这个问题的答案可能被证明是有用的: 使用javascript和jquery来填充具有数组结构的相关选择框
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.