最近在忙着写一个小型的协作系统,录入员可以在页面的表单录入数据,管理员从管理员界面读取数据并打印,考虑到表单设计中有些字段是不能预计的,比如民族选项字段,全部民族都写进去也不合适,只写一部分又怕日后不能满足需要,因此就考虑结合FillOptions,实现在平台使用过程中动态添加字段的功能(管理员从后台维护字段信息,录入员只需要刷新即可把字段获取过来)。
1、引入Jquery和FillOptions:
<script src="../../js/jquery.js"></script>
<script src="../../js/jQuery.FillOptions.js"></script>
2、页面元素:(部分代码),这里只需要写select标签,因为经过测试,FillOptions会事先清空Select下的option标签,后面可以动态添加option
<select name="Pnation" id="Pnation" tabindex="2" >
</select>
3、引入Javascript代码:
$("#Pnation").FillOptions(
"GetInfo/index.php?p=B_Pnation",
{
datatype:"json",
textfield:"text",
valuefield:"value"
}
);
为了方便理解,这里引入
Lee576 的博客文章部分说明:(
原文)
FillOptions(url,options)
参数说明
url:ajax请求的地址,必须
options包括如下参数
datatype:ajax请求返回的数据格式,可以是”xml”或”json”,默认为”json”
textfield:ajax请求返回的数据中下拉列表框选项文本的字段,默认为”text”
valuefiled:ajax请求返回的数据中下拉列表框选项值的字段,默认为”value”
keepold:布尔类型,是否保留下拉列表框选项原有选项,默认为不保留
selected:数值型,填充选项后第几项为选中状态,默认为0
需要说明的是在使用过程中option参数datatype、textfield、valuefield必须明确指定(尝试只提供URL参数时会获取不到数据)。
另外,在我的项目中:GetInfo/index.php文件大致应该这么写:
<?php
//指定页面编码
\header("Content-Type:text/json;charset=utf-8");
//嵌入页面初始化文件(数据库连接信息等)
require '../../resources/init.php';
//做一个基本判断,看是否传入p参数,这里我让p参数接受传入数据库的名字,后面的$query变量方便定义
if(isset($_GET['p'])){
$t=$_GET['p'];
}
else{
exit();
}
//定义两个变量,配合使用生成最终变量$list就是我想要的定义option的数组
$temp_value=array();
$list=array();
//数据库查询
$query="select * from $t";
$result=mysql_query($query);
//生成list数组
//这里注意,因为我定义的数据库中第二列就是民族名称,而且我让最终页面显示出来的
//就是民族名称,因此$temp['text']=$row[1];,另外,option所带的value(值)也是
//民族名称,因此$temp['value']=$row[1];这两个变量作为temp的数组元素,temp作为list数组的子元素因此:
//$list[]=$temp;
while($row= mysql_fetch_array($result)){
$temp['text']=$row[1];
$temp['value']=$row[1];
$list[]=$temp;
}
//最后,输出json格式的list数组
echo json_encode($list);
至此,所有代码都已完成,测试也顺利通过。