最近做项目要用到二级连动,索性写了小例子。大致分为两种情况,一种是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
分享到:
相关推荐
本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath()...
ajax+ASP实现无限级Select下拉框联动,形成一个实用的多级菜单,读取Access数据库,本实例是一个6级的菜单,根据你的需要,你还可以进行扩展。它使用AJAX技术控制数据使用时才加载,提高程序效率,可以参考一下。
ajaxdwr select二级联动
与数据库连接 ,员工表和部门表做成二级联动菜单,select下拉框实现的,选择部门的时候,自动加载部门的员工。简单,使用javascript asp实现!!
这个是一个select的二级联动实例,应用简单方便
二级下拉列表联动 select 网页 html5 学院、专业 选择的下拉列表 下载可用!!!
全国城市三级联动下拉列表,含修改页面select信息自动加载部分...个人博客:http://blog.csdn.net/qq_35624642?viewmode=contents
该小插件是自己写的谢谢指教。可以改写为三级菜单。
ASP.NET中的二级联动Select示例代码,页面使用ashx,js实现联动,并可以获取DropDownList的值。 1.Cascading DropDownList 使用场景 省市联动 部门人员联动 项目模块联动(示例) 使用技术 ...
js实现的二级菜单联动。选择的是省市联动
jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动...
基于jquery的用<select>实现二级动态联动菜单,里面用到jquer+ajax+json解析方面知识,通过无刷新去后台值实现的,可用性非常好,欢迎大家下载学习。
个人制作的一个select联动菜单,效果还不错,代码很简单,select内容均从mysql数据库中取出的!
静态二级联动 js 调取数据 带有 option 值
iosSelect.js 省市县乡村五级分类js和css文件
ajax实现动态从数据库模糊查询显示到下拉框中(ajax方法返回Dataset的例子)
清晰简洁的省市区三级联动
项目开发中写的 性能还没考虑到 不过很实用 jsp页面直接引用*.js文件 稍加修改 即可使用。可以实现无限级联动。
下面小编就为大家分享一篇vue select二级联动第二级默认选中第一个option值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
实现二级联动<script type="text/javascript" > $(function(){ // 学院选框被选择请求专业信息内容,并写入dom var chooseUrl='getChoose.jsp';//定义专业信息获取页面地址,比如你要在xueyuan.jsp里面读取专业...