一段代码，实现一个想法。。。
今天早上突然冒出来一个想法，就是在BS程序开发中，如果有几个下拉列表，而下拉列表的内容都是从数据库中读取的
互相之间还有联动关系，那么实现起来比较麻烦，可不可以有一种模式可以让这个工作变得的更简单呢？
想了一下，动手写了这个程序，只是粗略的实现了一下。。。
基本思路就是利用HTML组件可以自定义扩展属性的特性，对下拉列表的 显示值，数据值以及 互相之间的联动关系（比如省和市）进行定义，然后利用脚本程序，进行解析，利用XMLHTTP协议将请求发送到后台，进行数据的读取，然后再以JSON 数据对像的形式将数据 传回至前台页面。。。。
用到的东西：
HTML
javascript
json
xmlhttp
。。。。。
脚本代码如下：
<script language="javascript">
function query(qdata)
{
var poster;
poster=new ActiveXObject("Msxml2.XMLHTTP");
var url = "../select_init"+"?tmp=" + (Math.random()).toFixed(5); // 加随机数，防止IE缓存
poster.open("POST",url,false);
poster.send(qdata);
var rtn
rtn = poster.responseText;
return rtn;
}
//--当MASTER发生ONCHANGE事件时自动填充子下拉列表的数据项------//
function get_sub(master_compent,sub_compent,vtype,vfld)
{
var m_key;
var rtn_str;
m_key = master_compent.value;
var send_str ;
send_str = vfld + '#' + sub_compent.master_key + "='" + m_key + "'";
rtn_str = query(send_str);
rtn_str = "(" + rtn_str +")";
var data_obj = eval(rtn_str);
var disp_val,data_val;
sub_compent.options.length=0;
for(j=0;j<data_obj.ddlb_data.length;j++)
{
disp_val = data_obj.ddlb_data[j].disp;
data_val = data_obj.ddlb_data[j].data;
sub_compent.options[ j + 1 ] = new Option(disp_val,data_val);
}
}
function init_condition()
{
var rtn_str
var vdisp,vdata
var vattrib,vmaster_key,vmaster_compent
fm_condition.zu.options[0] = new Option('','')
var select_obj;
var sub_obj
var vmaster_type;
for(var k=0;k<fm_condition.elements.length;k++) {
if (fm_condition.elements[k].tagName=='SELECT'){
select_obj = fm_condition.elements[k];
vattrib = select_obj.init_attrib;//自动初始化属性
vdisp = select_obj.disp; //显示值属性
vdata = select_obj.data; //数据值属性
vmaster_type = select_obj.master_type;
vmaster_key = select_obj.master_key; //关联键值属性
vmaster_compent = select_obj.master_compent; //关联组件属性
if(vmaster_key.length >0 )
{
eval('fm_condition.' + vmaster_compent +'.onchange=function(){get_sub(this,fm_condition.'+
select_obj.name+ ','+ "'"+vmaster_type +"','"+ vdisp +'|' + vdata +"'"+');}' );
}
if (vattrib=='T'){
rtn_str = query(vdisp + '|' + vdata+'#');
//========接收返回数据并显示在select中=================/
rtn_str = "(" + rtn_str +")";
var data_obj = eval(rtn_str);
var disp_val,data_val;
for(j=0;j<data_obj.ddlb_data.length;j++)
{
disp_val = data_obj.ddlb_data[j].disp;
data_val = data_obj.ddlb_data[j].data;
select_obj.options[ j + 1 ] = new Option(disp_val,data_val);
}
}
}
}
}
</script>
HTML 实例：
<body >
<form name="fm_condition" action="jbxxbgjl_res.jsp" method="post">
<select name="zu" style="width:200px" disp='dm_zu.zu' data='dm_zu.id' master_compent=''
master_key = '' init_attrib='T'>
</select>
</form>
</body>
</html>
注：红色部分为自定义属性
disp属性： 是下拉列表的显示值，用法-- disp='表名.字段名'
data属性：是下拉列表的数据值。用法-- data='表名.字段名'
master_compent 属性： 是其上级关联的下拉列表，比如省与市。。如果没有，则设置其值为 ''
master_key 属性： 设置两下拉列表关联的 关键字
init_attrib属性： 设置该下拉列表框在页面打开时是否进行初始化，填充其值。 是 则为 T，否则为 F
另： 1、XMLHTTP 这里为了简单，采用了同步方式。。。
2、后台数据的读取，我只是粗略的用servlet实现，如何从数据库取数 ，用EJB，Hibernate，还是自己封装JDBC，还是其它的，完全视实际需要而定。。。。所以后面的代码就不再贴出来了。。
[ 本帖最后由 p.m 于 2007-7-3 13:27 编辑 ]
搜索更多相关主题的帖子:
数据库 代码 定义 后台 特性
