jquery根据选择值从表中填充文本输入
Posted
技术标签:
【中文标题】jquery根据选择值从表中填充文本输入【英文标题】：jquery populate text input from table based on select value 【发布时间】：2010-09-07 08:45:09 【问题描述】：我有一个表单，其中包含一个名为 Client_ID 的选择以及一些其他文本输入。我需要的是，当用户选择 Client_ID 时，我的字段 Address1、Address 2 等应该按照数据库查询的结果填充
SELECT Address1, Address2 from Client where Client_ID = Client_ID
我知道这有点像菜鸟问题，但非常感谢您提供最简单和最好的方法。
【问题讨论】：
【参考方案1】：你应该用jQuery + JSON做这样的事情
首先从here 下载 jquery 并将其包含在您的应用程序中。
如果home.php，你下载的jquery文件(jquery-1.4.2.min.js)和getData.php在同一个文件夹，那么您的 home.php 将如下所示：
home.php（包含您的表单的文件）
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
jQuery('#Client_ID').live('change', function(event)
$.ajax(
url : 'getData.php',
type : 'POST',
dataType: 'json',
data : $('#myform').serialize(),
success: function( data )
for(var id in data)
$(id).val( data[id] );
);
);
);
</script>
</head>
<body>
<form id='myform'>
<select name='Client_ID' id='Client_ID'>
<option value=''>Select</option>
<option value='1'>Client 1</option>
<option value='2'>Client 2</option>
</select>
<input type='text' name='address1' id='address1'>
<input type='text' name='address2' id='address2'>
<select name='gender' id='gender'>
<option value=''>Select</option>
<option value='1'>Male</option>
<option value='2'>Female</option>
</select>
</form>
</body>
</html>
getData.php
<?php
$clientId = $_POST['Client_ID']; // Selected Client Id
$query = "SELECT Address1, Address2 from Client where Client_ID = $clientId";
$result = mysql_query($query);
$row = mysql_fetch_array($result, MYSQL_ASSOC)
$add1 = $row[Address1];
$add2 = $row[Address2];
$gender = 1;
$arr = array( 'input#address1' => $add1, 'input#address2' => $add2, 'select#gender' => $gender );
echo json_encode( $arr );
?>
我已经在我的机器上测试了这段代码，它正在工作。
【讨论】：
(+1) 虽然如果我打算在客户端处理动态字符串，我总是发现从服务器返回 json 是最安全的。 Naveed，使用您的方法，如果我在浏览器中调用该页面，我将从 getdata.php 取回看似有效的数据。但是，更改选择的值时没有任何反应。我是否通过将 jquery 代码放在页面的 head 部分中来正确使用它？ 如果选择更改事件没有发生任何事情，则表示您的 jquery 代码未正确包含或您的 jquery 库未包含在内。是的，您可以在 head 部分添加 jquery 代码，但您必须在<script></script> 标记中关闭它并使用准备好的功能。查看已编辑的答案。现在在 head 部分添加了 jquery 代码。仔细阅读整个答案，然后再试一次。如果不成功，请再次在这里报告，我会尽力提供帮助。
感谢 Naveed。我把它放在
一个稍微相关的问题，不确定我是否应该为此开始一个新的 q。我正在更新的字段之一是另一个选择。 getdata.php 正在返回值（一个数字）。如何更新此 select 的 selected 属性，以便选择更新后的值？【参考方案2】：
阅读this tutorial。我认为它可能会帮助您理解将数据从客户端移动到服务器的概念，反之亦然。
请记住，在您的情况下，您需要组合事件。
$(document).ready(function()
$("#my_select_box").change(function()
//send the data to the server as in the tutorial above
);
);
【讨论】：
以上是关于jquery根据选择值从表中填充文本输入的主要内容，如果未能解决你的问题，请参考以下文章
如何将输入/选择值从网站保存到 XML/JSON 文件并使用 JavaScript 自动加载再次填充它们