您的位置:首页 > 数据库

js前台控制select二级联动,不是用Ajax对数据库的时时查询

2013-05-29 16:38 447 查看
最近做项目要用到二级连动,索性写了小例子。大致分为两种情况,一种是select菜单是固定的,如省份与市区的连动。还有一种是select菜单不是固定的,要按数据库生成selec。

先以第一种为例。首先是页面加载前先加载一个数组供select调用。

 

var selectTool = new Array();
window.onload=function(){//省略简写
selectTool[0] = new Array('1','保定','1');//数组内分别为所属省份的id,市名称,市的id
selectTool[1] = new Array('1','沧州','2');
selectTool[2] = new Array('1','秦皇岛','3');
selectTool[3] = new Array('1','邯郸','4');
selectTool[4] = new Array('2','郑州','5');
selectTool[5] = new Array('2','商丘','6');
selectTool[6] = new Array('2','洛阳','7');
selectTool[7] = new Array('2','开封','8');
}


然后是select框:

<select id="bigSelect" onchange="showNext()">
<option value=''>--请选择--</option>
<option value='1'>河北</option>
<option value='2'>河南</option>
</select>
<select id="sonSelect"></select>

js控制的方法是function showNext(){
var big = document.getElementById("bigSelect").value;
document.getElementById("sonSelect").length = 0;
document.getElementById("sonSelect").options.add(new Option("--请选择--",""));
for (i=0;i<selectTool.length;i++){
if (selectTool[i][0] == big){
document.getElementById("sonSelect").options.add(new Option(selectTool[i][1],selectTool[i][2]));
}
}
}


 

如过select菜单非固定的。可用request传递一个后台调取的List到前台。循环输出成数组

针对Java为

 

<%List<YouObj> sonList = (List<YouObj>)request.getAttribute("soList"); %>
var selectTool = new Array();
window.onload=function(){
<%for(int i=0;i<sonList.size();i++){
YouObj obj = sonList.get(i);%>
selectTool[<%=i%>]=new Array('<%=obj.getSheng_id()%>','<%=obj.getShi_name()%>','<%=obj.getShi_id()%>')
<%}%>}

此方法节省了Ajax不断向后台调取取数据查询,但同样缺点在于不能时刻更新。

Java学习交流群:   2177712
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: