js前台控制select二级联动,不是用Ajax对数据库的时时查询
2013-05-29 16:38
447 查看
最近做项目要用到二级连动,索性写了小例子。大致分为两种情况,一种是select菜单是固定的,如省份与市区的连动。还有一种是select菜单不是固定的,要按数据库生成selec。
先以第一种为例。首先是页面加载前先加载一个数组供select调用。
然后是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为
此方法节省了Ajax不断向后台调取取数据查询,但同样缺点在于不能时刻更新。
Java学习交流群: 2177712
先以第一种为例。首先是页面加载前先加载一个数组供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
相关文章推荐
- Ajax、js、 xml 、jsp菜单 测试二级联动查询
- JS结合数据库的二级联动菜单
- JS+html 实现select二级联动菜单
- jsp中,使用js生成动态的数据库相关的二级联动下拉框
- 使用Ajax和Jquery配合数据库实现下拉框的二级联动
- query ajax json 通过后台代码(查询数据库)绑定html控件select 下拉框实例
- jsp中,使用js生成动态的数据库相关的二级联动下拉框
- Struts2中<s:doubleselect>标签从MySQL数据库中查询出数据实现二级联动
- jsp中,使用js生成动态的数据库相关的二级联动下拉框
- AjaxPro 实现 三级联动菜单时,出现二级select 闪烁问题
- 连接数据库实现客户端脚本控制的二级联动下拉菜单(一)
- js实现HTML中Select二级联动
- js json省市二级联动菜单(json+select)
- jquery使用jquerydoubleselectmin.js实现二级菜单联动
- 前台使用ajax动态获取数据并且显示在页面上,SSM框架二级联动
- js入门·表单元素(select下拉列表)制作二级联动菜单和网站导航
- Js实现select联动,option从数据库中读取[转]
- 用ajax技术读取数据库内容实现二级联动下拉选择菜单