jquery实现省市两级联动菜单显示

合集下载

（实用篇）jQuery+PHP+MySQL实现二级联动下拉菜单

（实⽤篇）jQuery+PHP+MySQL实现⼆级联动下拉菜单⼆级联动下拉菜单选择应⽤在在很多地⽅，⽐如说省市下拉联动，商品⼤⼩类下拉选择联动。

本⽂将通过实例讲解使⽤jQuery+PHP+MySQL来实现⼤⼩分类⼆级下拉联动效果。

先看下效果实现的效果就是当选择⼤类时，⼩类下拉框⾥的选项内容也随着改变。

实现原理：根据⼤类的值，通过jQuery把值传给后台PHP处理，PHP通过查询MySQl数据库，得到相应的⼩类，并返回JSON数据给前端处理。

XHTML⾸先我们要建⽴两个下拉选择框，第⼀个是⼤类，第⼆个是⼩类。

⼤类的值可以是预先写好，也可以是从数据库读取。

<label>⼤类：</label><select name="bigname" id="bigname"><option value="1">前端技术</option><option value="2">程序开发</option><option value="3">数据库</option></select><label>⼩类：</label><select name="smallname" id="smallname"></select>jQuery先写⼀个函数，获取⼤类选择框的值，并通过$.getJSON⽅法传递给后台server.php，读取后台返回的JSON数据，并通过$.each⽅法遍历JSON数据，将对应的值写⼊⼀个option字符串，最后将option追加到⼩类⾥。

基于jquery的二级联动菜单实现代码

基于jquery的⼆级联动菜单实现代码复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>jQuery ⼆级联动</title><script src="/jslib/jquery/jquery.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){$("#province").change(function(){$("#province option").each(function(i,o){if($(this).attr("selected")){$(".city").hide();$(".city").eq(i).show();}});});$("#province").change();});</script></head><body><select id="province"><option>----请选择省份----<option>北京<option>上海<option>江苏</select><select class="city"><option>----请选择城市----</select><select class="city"><option>东城</option><option>西城</option><option>崇⽂</option><option>宣武</option><option>朝阳</option></select><select class="city"><option>黄浦</option><option>卢湾</option><option>徐汇</option><option>长宁</option><option>静安</option></select><select class="city"><option>南京</option><option>镇江</option><option>苏州</option><option>南通</option><option>扬州</option></select></body></html>先看页⾯代码Html代码复制代码代码如下:<tr><td align="right" width="30%"><span class="red">*</span>短信类型：</td><td align="left"><select name='city' id='first'><option value='-1'>==请选择类型==</option><#list typeList as t><option value='${t.id}'>${}</option></#list></select>  <span id="second"><select id="area" name="msgTypeId"></select></span></td></tr>其中id为first的下拉列表为第⼀个下拉列表，id为second的区域为第⼆个下拉列表。

二级省市级联jQuery简单实现

最简单jQuery实现二级省市级联，三级级联可依此扩展1.首先需要引入jQuery2.取出省份下拉列表对象，当省份下拉列表域发生改变时，执行如下方法3.该方法解析：取出省份下拉列表对象，和被选中的option文本，取出城市下拉列表对象，并清空城市所有option，根据省份被选中的option内的文本，来填充不同的城市，由此实现二级联动。

HTML二级联动--城市省份

HTML⼆级联动--城市省份HTML⼆级联动--城市省份<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 500px;margin: 30px auto;}select {width: 100px;}</style></head><body><div><select name="" id="province"><option value="0">选择省</option><option value="1">湖北</option><option value="2">湖南</option></select><select name="" id="city"><option value="0">选择市</option></select></div><script>let province = document.getElementById('province');let city = document.getElementById('city');//通过document.getElementById()函数是通过id值获取节点元素province.onchange = function () {createCity();} //将createCity()函数绑定到province.onchange事件上//创建city信息function createCity() {//获取选中项值或直接⽤：province.valuelet val = province.options[province.selectedIndex].value;//使⽤option[]数组创建更多的选项//selectedIndex 属性可设置或返回下拉列表中被选选项的索引号let ops;switch (val) {case '0': //case⽤字符串city.innerHTML = '<option value="0">选择市</option>';// innerHTML 属性设置或返回表格⾏的开始和结束标签之间的HTML。

简单实现jQuery级联菜单

简单实现jQuery级联菜单本⽂实例为⼤家分享了jQuery实现级联菜单的具体代码，供⼤家参考，具体内容如下层叠样式表：.button {border: 1px ridge #ffffff;line-height:18px;height: 20px;width: 45px;padding-top: 0px;background:#CBDAF7;color:#000000;font-size: 9pt;}HTML正⽂：<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:280px; height:200px; background-color:#E6E6E6;"> <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;"><tr><td width="126"><select name="first" size="10" multiple="multiple" class="td3" id="first"><option value="选项1">选项1</option><option value="选项2">选项2</option><option value="选项3">选项3</option><option value="选项4">选项4</option><option value="选项5">选项5</option></select></td><td width="69" valign="middle"><input name="add" id="add" type="button" class="button" value="-->" /><input name="add_all" id="add_all" type="button" class="button" value="==>" /><input name="remove" id="remove" type="button" class="button" value="<--" /><input name="remove_all" id="remove_all" type="button" class="button" value="<==" /></td><td width="127" align="left"><select name="second" size="10" multiple="multiple" id="second"><option value="选项6">选项6</option></select></td></tr></table>Javascript操作代码：$(document).ready(function(){$("#add").click(function(){$("#first option:selected").appendTo($("#second"));});$("#add_all").click(function(){$("#first option").appendTo($("#second"));});$("#remove").click(function(){$("#second option:selected").appendTo($("#first"));});$("#remove_all").click(function(){$("#second option").appendTo($("#first"));});});效果：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

jQuery下拉列表二级联动插件

jQuery下拉列表⼆级联动插件jQuery⼆级联动插件：jQuery.selected⼀个页⾯可以引⽤多个联动效果，使⽤⽅法：配置js：1var defaults = {2 NextSelId: '#Select2',3 SelTextId: '#Text1',4 Separator: '--',5 SelStrSet: [6 { name: '请选择', subname: '请选择'},7 { name: '★⾼起本★', subname: '计算机科学与技术|汉语⾔⽂学' },8 { name: '★⾼起专★', subname: '语⽂教育|⽂秘|学前教育|旅游管理|法律事务|经济管理|会计电算化|电⼦商务|计算机信息管理|软件⼯程|机电⼀体化|精细化学品⽣产技术|机械制造设计及⾃动化|播⾳与主持|艺术设计|书法⽅向艺术设计' },9 { name: '★专升本★', subname: '思想政治教育|汉语⾔⽂学|英语|数学与应⽤数学|电⼦信息⼯程|计算机科学与技术|会计学|公共事业管理|旅游管理|体育教育|⾳乐学|艺术设计|书法⽅向艺术设计'}]10 }1112var defaults2 = {13 NextSelId: '#Select4',14 SelTextId: '#Text2',15 Separator: '★',16 SelStrSet: [17 { name: '请选择', subname: '请选择'},18 { name: '北京', subname: '北京1|北京2' },19 { name: '上海', subname: '上海1|上海2|上海3|上海4' },20 { name: '天津', subname: '天津'}]21 } 配置说明： NextSelId：需要联动加载的下拉列表 ID SelTextId：显⽰选择选项的⽂本框 ID Separator：⼀级菜单、⼆级菜单分割字符串 SelStrSet：配置下拉选项 [{ name: '请选择', subname: '请选择'}] name：⼀级下拉选项；subname：⼆级下拉选项，多个⽤“|”分开；html页⾯：1<body>2<script type="text/javascript">3 $(function () {4 $('#Select1').selected(defaults);5 $('#Select3').selected(defaults2);67 });8</script>9<select id="Select1">10</select>11<select id="Select2">12</select>13<input id="Text1" type="text"/>14<br />15<select id="Select3">16</select>17<select id="Select4">18</select>19<input id="Text2" type="text"/>20</body>有好的建议请留⾔评论！。

jquery实现select二级联动

jquery实现select⼆级联动jquery实现⼀个简单的select⼆级联动菜单，代码如下1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>jQuery ⼆级联动</title>6<style>7 .city{8 display: none;;9 }10 .city_first {11 display: block;12 }13</style>14<script src="jquery/jquery-1.11.3.min.js"></script>15<script>16 $(document).ready(function(){17 $("#province").change(function(){18var index = $(this).get(0).selectedIndex;19 $('.city').hide().eq(index).show();20 });21 });22</script>23</head>24<body>25<select id="province">26<option>----请选择省份----</option>27<option>北京</option>28<option>上海</option>29<option>江苏</option>30</select>31<select class="city city_first">32<option>----请选择城市----</option>33</select>3435<select class="city">36<option>----请选择城市----</option>37<option>东城</option>38<option>西城</option>39<option>崇⽂</option>40<option>宣武</option>41<option>朝阳</option>42</select>43<select class="city">44<option>----请选择城市----</option>45<option>黄浦</option>46<option>卢湾</option>47<option>徐汇</option>48<option>长宁</option>49<option>静安</option>50</select>51<select class="city">52<option>----请选择城市----</option>53<option>南京</option>54<option>镇江</option>55<option>苏州</option>56<option>南通</option>57<option>扬州</option>58</select>59</body>60</html>。

jquery实现二级导航下拉菜单效果实例

jquery实现⼆级导航下拉菜单效果实例⼤家都知道jQuery是⼀个框架，它对JS进⾏了封装，使其更⽅便使⽤。

前⾯两篇博⽂分别是⽤CSS样式和JS实现的，那么这篇就⽤jQuery来实现⼆级下拉式菜单。

使⽤JQuery实现需要⽤到的知识有：1. 1)使⽤$(function(){...})获取到想要作⽤的HTML元素。

2. 2)通过使⽤children()⽅法寻找⼦元素。

3. 3)通过使⽤show()⽅法来显⽰HTML元素。

4. 4)通过使⽤hide()⽅法来隐藏HTML元素。

5. 5)jQuery库引⽤⽅法:第⼀种⽅法：将jQuery库下载到电脑上，然后引⽤，我下载的是jquery-1.7.1.min.js这个版本。

例如：<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>第⼆种⽅法：直接引⽤在线服务器上的jQuery库⽂件，⽐如⾕歌服务器jQuery库，百度服务器jQuery库等。

例如：引⽤百度服务器上的jQuery库⽂件<script type="text/javascript" src="jquery/1.9.0/jquery.js"></script>接下来看看制作的流程：1. 1、调⽤jQuery库：编写代码，引⽤jquery库。

由于⾕歌已退出⼤陆，建议使⽤百度服务器的jQuery库。

2. 注意: 百度服务器的jQuery库地址:/jquery/1.9.0/jquery.js3. 2 、编写显⽰⼦菜单函数，使⽤$,并通过class名获取⼀级菜单li，过children()找到li的孩⼦元素ul，使⽤show()⽅法,显⽰⼆级菜单。

4. 3、编写隐藏⼦菜单函数，使⽤$,并通过class名获取⼀级菜单li，过children()找到li的孩⼦元素ul，使⽤hide()⽅法, 隐藏⼆级菜单。

jQuery实现联动下拉列表查询框

jQuery实现联动下拉列表查询框在查询与列表显⽰的时候经常⽤到联动列表显⽰，⽐如⼀级选项是国家，⼆级选项是省，三级是市，这样的联动是联系的实时导出的，⽐如你不可能选择了四川省却在三级联动栏中出现济南市，这样的联动实现⽅法如下：效果图⽰：实现源代码：<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta name="keywords" content=" keywords" /><meta name="description" content="description" /></head><script type="text/javascript" src="jquery-1.4.2.min.js"></script><style type="text/css">body{font-size:13px}.clsInit{width:435px;height::35px;line-height:35px;padding-left:10px}.clsTip{padding-top:5px;background-color:#eee;display:none}.btn{border:solid 1px #666;padding:2px;width:65px;float:right;margin-top:6px;margin-right:6px;filter:progid:DXImageTransform.Mcrosoft.Gradient(GraientType=0,StartColorStr=#FFFFFF,EndColorStr=#ECE9D8);} </style><body><script type="text/javascript">$(function(){function objInit(obj){return $(obj).html('<option>请选择</option>');}var arrData={⼚商1:{品牌⼀:'型号1-1-1,型号1-1-2',品牌⼆:'型号1-2-1,型号1-2-2'},⼚商2:{品牌⼀:'型号2-1-1,型号2-1-2',品牌⼆:'型号2-2-1,型号2-2-2'},⼚商3:{品牌⼀:'型号3-1-1,型号3-1-2',品牌⼆:'型号3-2-1,型号3-2-2'}};$.each(arrData,function(pF){$('#selF').append('<option>'+pF+'</option>');});$('#selF').change(function(){objInit('#selT');objInit('#selC');$.each(arrData,function(pF,pS){if($('#selF option:selected').text()==pF){$.each(pS,function(pT,pC){$('#selT').append('<option>'+pT+'</option>');});$('#selT').change(function(){objInit('#selC');$.each(pS,function(pT,pC){if($('#selT option:selected').text()==pT){$.each(pC.split(","),function(){$('#selC').append('<option>'+this+'</option>');})}})});}})});});</script><div class="clsInit">⼚商：<select id="selF"><option>请选择</option></select>品牌：<select id="selT"><option>请选择</option></select>型号：<select id="selC"><option>请选择</option></select><input type="button" value="查询" id="Button1" class="btn" /></div><div class="clsInit" id="divTip"></div></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

jQuery制作简洁的多级联动Select下拉框

jQuery制作简洁的多级联动Select下拉框今天我们要来分享⼀款很实⽤的jQuery插件，它是⼀个基于jQuery多级联动的省市地区Select下拉框，并且值得⼀提的是，这款联动下拉框是经过⾃定义美化过的，外观⽐浏览器⾃带的要漂亮许多。

另外，这个Select下拉框也可以绑定下拉事件，并获取当前选中项的值。

html代码：复制代码代码如下:<div class="wrap"><div class="nice-select" name="nice-select"><input type="text" value="==选择省份==" readonly><ul><li data-value="1">湖北省</li><li data-value="2">⼴东省</li><li data-value="3">湖南省</li><li data-value="4">四川省</li></ul></div><div class="h20"></div><div class="nice-select" name="nice-select"><input type="text" value="==选择城市==" readonly><ul><li data-value="1">武汉市</li><li data-value="2">深圳市</li><li data-value="3">长沙市</li><li data-value="4">成都市</li></ul></div><div class="h20"></div><div class="nice-select" name="nice-select"><input type="text" value="==选择区县==" readonly><ul><li data-value="1">蔡甸区</li><li data-value="2">南⼭区</li><li data-value="3">⾬花区</li><li data-value="4">武侯区</li></ul></div></div><script type="text/javascript" src="js/jquery.js"></script><script>$('[name="nice-select"]').click(function (e) {$('[name="nice-select"]').find('ul').hide();$(this).find('ul').show();e.stopPropagation();});$('[name="nice-select"] li').hover(function (e) {$(this).toggleClass('on');e.stopPropagation();});$('[name="nice-select"] li').click(function (e) {var val = $(this).text();var dataVal = $(this).attr("data-value");$(this).parents('[name="nice-select"]').find('input').val(val);$('[name="nice-select"] ul').hide();e.stopPropagation();alert("中⽂值是：" + val);alert("数字值是：" + dataVal);//alert($(this).parents('[name="nice-select"]').find('input').val()); });$(document).click(function () {$('[name="nice-select"] ul').hide();});</script>css代码：复制代码代码如下:body{color: #555;font-size: 14px;font-family: "微软雅⿊" , "Microsoft Yahei";background-color: #EEE;}a{color: #555;}a:hover{color: #f00;}input{font-size: 14px;font-family: "微软雅⿊" , "Microsoft Yahei";}.wrap{width: 500px;margin: 100px auto;}.h20{height: 20px;overflow: hidden;clear: both;}.nice-select{width: 245px;padding: 0 10px;height: 38px;border: 1px solid #999;position: relative;box-shadow: 0 0 5px #999;background: #fff url(images/a2.jpg) no-repeat right center;cursor: pointer;}.nice-select input{display: block;width: 100%;height: 38px;line-height: 38px \9;border: 0;outline: 0;background: none;cursor: pointer;}.nice-select ul{width: 100%;display: none;position: absolute;left: -1px;top: 38px;overflow: hidden;background-color: #fff;max-height: 150px;overflow-y: auto;border: 1px solid #999;border-top: 0;box-shadow: 0 3px 5px #999;z-index: 9999;}.nice-select ul li{height: 30px;line-height: 30px;overflow: hidden;padding: 0 10px;cursor: pointer;}.nice-select ul li.on{background-color: #e0e0e0;}代码很简洁，我这⾥就不多做解释了，⼩伙伴们⾃⼰预览下就知道效果是多麽的简洁⼤⽅了，⾮常实⽤。

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

使⽤Ajax和Jquery配合数据库实现下拉框的⼆级联动的⽰例⾸先我们需要先建⽴好数据库，将⼀些数据插⼊进去需要两张表：province：省份表city：城市表如图：然后再在java中建⽴相关的实体类与之对应再然后，我们就能开始做jdbc的操作了public class ConnectionFactory {private static String driver;private static String url;private static String user;private static String password;static {Properties prop = new Properties();//读取⽂件try {InputStream in = ConnectionFactory.class.getResourceAsStream("./jdbc.properties");prop.load(in);driver = prop.getProperty("jdbc.driver");url = prop.getProperty("jdbc.url");user = prop.getProperty("er");password = prop.getProperty("jdbc.password");} catch (IOException e) {e.printStackTrace();}}/*** 获取连接对象* @returnpublic static Connection getConnection(){Connection conn = null;try {Class.forName(driver);conn = DriverManager.getConnection(url, user, password);} catch (Exception e) {throw new RuntimeException(e);}return conn;}/*** 关闭资源* @param conn* @param pstmt* @param stmt* @param rs*/public static void close(Connection conn,PreparedStatement pstmt,Statement stmt,ResultSet rs){ try {if (conn != null) {conn.close();}if (pstmt != null) {pstmt.close();}if (stmt != null) {stmt.close();}if (rs != null) {rs.close();}} catch (SQLException e) {throw new RuntimeException(e);}}⾸先我们可以在页⾯加载的时候获取所有省份的信息，SQL语句如下Connection conn = null;PreparedStatement pstmt = null;Province province2 = null;@Overridepublic ArrayList<Province> findAllPro() {ResultSet rs = null;ArrayList<Province> pros = null;try {String sql = "select id,place from province";conn = ConnectionFactory.getConnection();pstmt = conn.prepareStatement(sql);pros = new ArrayList<Province>();rs = pstmt.executeQuery();while(rs.next()){Province province = new Province();province.setId(rs.getInt(1));province.setPlace(rs.getString(2));pros.add(province);}} catch (SQLException e) {throw new RuntimeException(e);}return pros;将查到的数据放到后台,建⽴⼀个SelectedServlet类，⽤于接收查询到的所有省份的信息response.setContentType("application/json;charset=utf-8");response.setCharacterEncoding("utf-8");request.setCharacterEncoding("utf-8");//创建⼀个Place对象ArrayList<Province> pros= new Place().findAllPro();PrintWriter out = response.getWriter();//将集合直接转换为Json对象out.write(JSONArray.fromObject(pros).toString());在这⾥会⽤到集合转换Json对象，我们需要导⼊以下⼏个包然后我们开始写前台页⾯：<body>省份:<select id="province"><option>--请选择省份--</option></select>城市:<select id="city"><option>--请选择城市--</option></select><br/><br/><span></span></body>然后jQuery代码如下:（由于我导⼊的jQuery版本⽐较低，所以使⽤的⽅法是getJSON，⽽不是getJson）$.getJSON("SelectedServlet",function(data,textStatus){var provinces = data;var res = "";for(var i =0;i<provinces.length;i++){<span style="white-space:pre"> </span>res += "<option>"+provinces[i].place+"</option>";}$("#province").append(res);});这样就能在页⾯加载的时候获取到数据然后我们再来做联动，⾸先给下拉框添加⼀个change事件，然后获取选中的信息，将选中的信息发送到另⼀个CityServlet中//下拉框改变时触发的事件$("#province").change(function(){var seled = $("option:selected").html();$("span").html(seled);$.getJSON("CityServlet",{"province":encodeURI(encodeURI(seled))},function(data){$("#city").html("");var citys = data;var res = "";for(var i = 0;i<citys.length;i++){res += "<option>"+citys[i].place+"</option>";}$("#city").append(res);});});服务器通过获得的信息通过sql语句查询出来，SQL代码如下：public ArrayList<City> findAllCityByPro(String name) {ResultSet rs = null;ArrayList<City> citys = null;try {//通过名字获得所有值String sql = "select c.city_place from city c ,"+ "province p where c.province_id = "+ " (select id from province where place = '"+ name +"') "+ " and c.province_id = p.id";conn = ConnectionFactory.getConnection();pstmt = conn.prepareStatement(sql);citys = new ArrayList<City>();System.out.println(sql);rs = pstmt.executeQuery();while(rs.next()){City city = new City();city.setPlace(rs.getString(1));citys.add(city);}System.out.println(citys);} catch (SQLException e) {e.printStackTrace();}return citys;}将查询到的数据发送到后台，后台接收到数据后将其转换为Json对象，并通过回调函数发送到前台，然后前台就可以通过事件直接获取到数据，⽽不⽤各种跳转页⾯，这就是Ajax(Asynchronous Javascript And XML),protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("application/json;charset=utf-8");response.setCharacterEncoding("utf-8");request.setCharacterEncoding("utf-8");// String proName = "浙江";String proName = URLDecoder.decode(URLDecoder.decode(request.getParameter("province"), "utf-8"),"utf-8");ArrayList<City> citys= new Place().findAllCityByPro(proName);PrintWriter out = response.getWriter();out.write(JSONArray.fromObject(citys).toString());}⾄于显⽰页⾯的代码也在前⾯写到jQuery语句中了效果如下：以上这篇使⽤Ajax和Jquery配合数据库实现下拉框的⼆级联动的⽰例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

jquery实现下拉列表二级联动

jquery实现下拉列表⼆级联动1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>标题</title>6 <script type="text/javascript" src="js/jquery-3.4.1.js"></script>7 <script type="text/javascript">8 var provinceArr = new Array(5); //定义数组保存⼆级市级名称9 provinceArr[0]=new Array("北京市");10 provinceArr[1]=new Array("郑州市","洛阳市","濮阳市","驻马店市");11 provinceArr[2]=new Array("⽯家庄市","唐⼭市","秦皇岛市","邯郸市");12 provinceArr[3]=new Array("西安市","宝鸡市","延安市");13 provinceArr[4]=new Array("菏泽市","济南市","青岛市");1415 $(function () {16 $("#province").change(function () {17 $("#city").empty(); //清空city的下拉列表18 var provinceID=this.value;19 if(provinceID==-1){20 $("#city").html("<option value=\"-1\">-请选择-</option>");21 }else {22 for(var i=0;i<provinceArr[provinceID].length;i++){23 // console.log(provinceArr[provinceID][i]);24 var option = document.createElement("option"); //加⼊option标签25 option.innerText=provinceArr[provinceID][i];26 $("#city").append(option); //append⽅法直接加⼊内容 —— option变量包含html标签和内容27 }28 }29 });30 });31 </script>32 </head>33 <body>34 <select id="province">35 <option value="-1">-请选择-</option>36 <option value="0">北京市</option>37 <option value="1">河南省</option>38 <option value="2">河北省</option>39 <option value="3">陕西省</option>40 <option value="4">⼭东省</option>41 </select>42 <select id="city">43 <option value="-1">-请选择-</option>44 </select>45 </body>46 </html>。

jquery实现二级联动

jquery实现二级联动js：<script type="text/javascript">function getCity(){var provinceCode = document.getElementById('province_code').value;$.getJSON("/manage/corp/getcity.action?provinceCode="+provinceCode, "", function(response){$ ("#city_code").show();//将隐藏的select显示出来$ ("#city_code option").remove();//将select中的信息清空$.each(response,function(i){//将后台传回的信息打印到页面中$ ("#city_code").append ("<option value="+response[i].city_code+">"+ response[i].city_name+ "</option>");});});}</script>html：<select id="province_code"name="province_code"class="middle_select"onChange="getCity();"><c:forEach var="对象"items="${前台打印的列表}"varStatus="status"><option value="${对象.对象的属性名称}">${对象.对象的属性名称}</option></c:forEach></select><select id="city_code"name="city_code"style="display:none"></select>Struts配置<package name="/manage/aop/"extends="struts-default"> <action name="getcity"method="getcity"class="com.cmcc.web.action.aop.AopLoginAction"></action></package>Java代码public String getcity() throws Exception {("选择城市");//获取前台传来的值String province = this.getRequest().getParameter("provinceCode");//根据前台传来的值返回指定的信息List<AopCity> cityse = SpringHelper.getICityService().getAopCityListByProvince(province);//组成JSON对象传到前台//将list转换成JSON对象JSONArray jr = JSONArray.fromObject(cityse);PrintWriter out = this.getResponse().getWriter();//将JSON对象转换成String类型传入前台String jsonUser = jr.toString();out.print(jsonUser);out.flush();out.close();return null; }。

jQuery插件实现多级联动菜单效果

jQuery插件实现多级联动菜单效果开发中，有好多地⽅⽤到联动菜单，以前每次遇到联动菜单的时候都去重新写，代码重⽤率很低，前⼏天⼜遇到联动菜单的问题，总结了下，发现可以开发⼀个联动菜单的功能，以后想⽤的时候就⽅便多了。

项⽬中每个页⾯都有引⽤jQuery，，开发个jQuery联动菜单插件，说动⼿就动⼿，下⾯跟⼤家分享分享。

我⽤的jQuery插件⽅式(function($){$.fn.casmenu=function(argvs){//your code}})(jQuery);其中jQuery传⼊的是jquery对象，需要在扩展之前引⽤。

在扩展中同样使⽤jQuery的短格式$。

$.fn是指jquery的命名空间，加在fn上的⽅法及属性，会对jquery实例每⼀个有效，看看下⾯的jquery源码101⾏左右：jQuery.fn = jQuery.prototype = {......}⽐如说后⾯要开发的$.fn.casmenu()，定义之后，在后⾯的jquery对象都可以使⽤该⽅法。

这⾥还有⼀种扩展的⽅法：$.extend({funName: function(){//your code},});这种扩展⽅法和上⾯的是有区别的，要是拿类做类⽐的话，$.extend这种⽅法相当于类中的静态⽅法，上⾯的⼀种⽅式相当于⾮静态⽅法，必须有对象才可以使⽤。

简单的理解，是下⾯这样的：//$.fn.casemenu ⽅式扩展的⽅法，必须在有jquery对象的时候才可以使⽤$("#mydiv").casmenu();//$.extend({}) ⽅式扩展的⽅法，可以直接使⽤$.add(2,3);设计思路⾸先是层级菜单的数据保存⽅式，看看下⾯的数据：var levels={//内容中有引号，必须使⽤单引号，外引号必须⽤双引号//name => value1:{退出应⽤: "code1003",登录界⾯:"code1004",跳转⾄个⼈资料界⾯:"code1005",},2:{退出应⽤:{应⽤1:"gameid1",应⽤2:"gameid2",应⽤3:"gameid3",应⽤4:"gameid4",应⽤5:"gameid5",},跳转⾄个⼈资料界⾯:{主界⾯:"main interface",}},3:{应⽤1:{中级场:"12",⾼级场:"13",职业场:"14",⽐赛场:"15",}}}对象levels中的直接键值1、2、3代表菜单的层级，没有就不⽤些，每⼀项name=>value代表select中option的名称和value。

jquery实现鼠标滑过显示二级下拉菜单效果

jquery实现⿏标滑过显⽰⼆级下拉菜单效果本⽂实例讲述了jquery实现⿏标滑过显⽰⼆级下拉菜单效果。

分享给⼤家供⼤家参考。

具体如下：这是⼀款jquery实现的下拉菜单，当⿏标移在主菜单上的时候，向下滑出⼆级⼦菜单，采⽤UL LI结构，便于修改完善，我觉得是很实⽤的菜单，希望⼤家平时能⽤得上。

运⾏效果截图如下：在线演⽰地址如下：具体代码如下：<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery下拉菜单</title><script type="text/javascript" src="jquery-1.6.2.min.js"></script><style>* { margin: 0; padding: 0; }body {font-family: Arial, Tahoma, sans-serif; font-size: 11px; color: #232323; }.wrap { width: 800px; margin: 0 auto; }#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; border-bottom: 1px solid #d5dce8; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-botto #nav li { float: left; display: block; background: none; position: relative; z-index: 999; margin: 0 1px; }#nav li a { display: block; padding: 0; font-weight: 700; line-height: 50px; text-decoration: none; color: #818ba3; zoom: 1; border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 0px 12px; }#nav li a:hover, #nav li a.hov { background-color: #fff; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; color: #576482; }#nav ul { position: absolute; left: 1px; display: none; margin: 0; padding: 0; list-style: none; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); -o-box-shadow: 0 1px 3px rgba(0,0,0,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0 #nav ul li { width: 180px; float: left; border-top: 1px solid #fff; text-align: left; }#nav ul li:hover { border-left: 0px solid transparent; border-right: 0px solid transparent; }#nav ul a { display: block; height: 20px; line-height: 20px; padding: 8px 5px; color: #666; border-bottom: 1px solid transparent; text-transform: uppercase; color: #797979; font-weight: normal; }#nav ul a:hover { text-decoration: none; border-right-color: transparent; border-left-color: transparent; background: transparent; color: #4e4e4e; }* html #nav ul { margin: 0 0 0 -2px; }.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }.clearfix { display: inline-block; }html[xmlns] .clearfix { display: block; }* html .clearfix { height: 1%; }</style></head><body><div class="wrap"><ul id="nav"><li><a href="#">⽹站主页</a></li><li><a href="#">关于我</a><ul><li><a href="#">Company</a></li><li><a href="#">Authors</a></li><li><a href="#">Advertising</a></li></ul></li><li><a href="#">RSS订阅</a><ul><li><a href="#">PSD</a></li><li><a href="#">Patterns</a></li><li><a href="#">Icons</a></li></ul></li><li><a href="#">精美博⽂</a><ul><li><a href="#">HTML5</a></li><li><a href="#">CSS3</a></li><li><a href="#">jQuery</a></li><li><a href="#">MySQL</a></li></ul></li><li><a href="#">Web⼯具</a><ul><li><a href="#">Performance</a></li><li><a href="#">CMS Plugins</a></li><li><a href="#">Cheat Sheets</a></li></ul></li><li><a href="#">Originals</a><ul><li><a href="#">Website Design</a></li><li><a href="#">Mobile</a></li></ul></li></ul></div><script type="text/javascript">$(document).ready(function() {$('#nav li').hover(function() {$('ul', this).slideDown(200);$(this).children('a:first').addClass("hov");}, function() {$('ul', this).slideUp(100);$(this).children('a:first').removeClass("hov");});});</script></body></html>希望本⽂所述对⼤家的jquery程序设计有所帮助。

二级菜单联动效果实现

⼆级菜单联动效果实现页⾯⾥有个选择地点的选项框，实现之后的效果是选择了省市⾃动填充市区到⼆级选项框内，最近重看了这块的代码，结合例⼦总结了⼀下：省/市<select name="省市" id="province"></select>市/区<select name="市区" id="city"></select><script>let arr_province = ['请选择省/直辖市','北京市','上海市','⼴东省'];let arr_city = [['请选择市/区'],['东城区','西城区','朝阳区','宣武区','昌平区','⼤兴区','丰台区','海定区'],['宝⼭区','长宁区','奉贤区','虹⼝区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'],['⼴州市','惠州市','汕头市','珠海市','佛⼭市','中⼭市','东莞市']];let province = document.getElementById('province');let city = document.getElementById('city');//⼀级菜单初始化province.length = arr_province.length;for (let i = 0; i < arr_province.length; i++) {province.options[i].text = arr_province[i];}//⼆级菜单初始化city.length = 1;city.options[0].text = arr_city[0][0];province.onchange = function(){let index = province.selectedIndex;city.length = arr_city[index].length;for(let i = 0; i < city.length; i++){city.options[i].text = arr_city[index][i];}}</script>需要注意的是：⼀级菜单数据需要和⼆级菜单数据⼀⼀对应，否则会出现省市对应不同的市区。

jQuery城市级联菜单，jquery省、市、县三级级联菜单

jQuery城市级联菜单，jquery省、市、县三级级联菜单容易用的jQuery城市级联菜单，jquery省、市、县三级级联菜单。

城市写在js文件里，调用只要引用js文件即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><title>jQuery 三级地市级联菜单_</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>#test select{width:100px;margin-left:20px;}</style><script src="jquery-1[1].2.6.js" type="text/javascript"></script><script src="jquery.provincesCity.js" type="text/javascript"></script><script src="provincesdata.js" type="text/javascript"></script><script>//调用插件$(function(){$("#test").ProvinceCity();});</script></head><body><div id="test"></div></body></html>jquery省、市、县三级级联菜单效果图。

学习情境十 jQuery制作二级菜单[18页]

2、任务分析
任务目标： 1．了解二级菜单的结构和样式 2．了解jQuery的功能 3．掌握jQuery的基本框架代码 4．掌握jQuery中的hover事件 5．掌握jQuery中的基本动画函数
Javascript特效实战
Javascript特效实战
2、任务分析
设计思路：任务一：二级菜结构与样式编写任务二：jQuery文件的引入（重点）任务三：jQuery实现二级菜单效果（重点，难点）
Javascript特效实战
5、知识拓展
JQuery过滤选择器在使用Jquery查找元的过程中，除了基本的选择器外，用户可以通过过滤选择器来对选定的元素进行过滤，使元素的查找更快捷、精准。过滤选择器是在基础选择器上通过“：”加过滤条件来完成的。如我们要查找DIV中元素中的第一个元素，那么可以这样：$(“div： first”)。按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器。
//我们自己的jQuery代码，写在这里 }); </script>
3、任务实施
任Байду номын сангаас三：jQuery实现二级菜单效果 $("#nav>ul>li").hover(function(){
$(this).children("ul").show(); }, function(){
$(this).children("ul").hide(); } );
4、知识小节
JQuery的ready函数 $(document).ready(function(){
//当文档载入后从此处开始执行代码 });

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

('12110000', '衡水市', '衡水', '12000000'),
('13000000', '山西省', '山西', '0'),
('13010000', '太原市', '太原', '13000000'),
('13020000', '大同市', '大同', '13000000'),
('13030000', '阳泉市', '阳泉', '13000000'),
('17070000', '伊春市', '伊春', '17000000'),
('17080000', '佳木斯市', '佳木斯', '17000000'),
('17090000', '七台河市', '七台河', '17000000'),
('17100000', '牡丹江市', '牡丹江', '17000000'),
('12070000', '张家口市', '张家口', '12000000'),
('12080000', '承德市', '承德', '12000000'),
('12090000', '沧州市', '沧州', '12000000'),
('12100000', '廊坊市', '廊坊', '12000000'),
('16090000', '延边朝鲜族自治州', '延边', '16000000'),
('17000000', '黑龙江省', '黑龙江', '0'),
('17010000', '哈尔滨市', '哈尔滨', '17000000'),
('17020000', '齐齐哈尔市', '齐齐哈尔', '17000000'),
('17110000', '黑河市', '黑河', '17000000'),
('17120000', '绥化市', '绥化', '17000000'),
('17130000', '大兴安岭地区', '大兴安岭', '17000000'),
('18000000', '上海市', '上海', '0'),
('19050000', '苏州市', '苏州', '19000000'),
('19060000', '南通市', '南通', '19000000'),
('19070000', '连云港市', '连云港', '19000000'),
('19080000', '淮安市', '淮安', '19000000'),
('15030000', '鞍山市', '鞍山', '15000000'),
('15040000', '抚顺市', '抚顺', '15000000'),
('15050000', '本溪市', '本溪', '15000000'),
市', '丹东', '15000000'),
('14120000', '阿拉善盟', '阿拉善', '14000000'),
('15000000', '辽宁省', '辽宁', '0'),
('15010000', '沈阳市', '沈阳', '15000000'),
('15020000', '大连市', '大连', '15000000'),
('21090000', '黄山市', '黄山', '21000000'),
('21100000', '滁州市', '滁州', '21000000'),
('21110000', '阜阳市', '阜阳', '21000000'),
('21120000', '宿州市', '宿州', '21000000'),
sql
CREATE TABLE IF NOT EXISTS `areas` (
`id` varchar(16) NOT NULL,
`cname` varchar(64) NOT NULL,
`alias` varchar(64) NOT NULL,
`parentid` varchar(16) NOT NULL,
('20040000', '嘉兴市', '嘉兴', '20000000'),
('20050000', '湖州市', '湖州', '20000000'),
('20060000', '绍兴市', '绍兴', '20000000'),
('20070000', '金华市', '金华', '20000000'),
('20080000', '衢州市', '衢州', '20000000'),
('20090000', '舟山市', '舟山', '20000000'),
('20100000', '台州市', '台州', '20000000'),
('20110000', '丽水市', '丽水', '20000000'),
('12030000', '秦皇岛市', '秦皇岛', '12000000'),
('12040000', '邯郸市', '邯郸', '12000000'),
('12050000', '邢台市', '邢台', '12000000'),
('12060000', '保定市', '保定', '12000000'),
('16050000', '通化市', '通化', '16000000'),
('16060000', '白山市', '白山', '16000000'),
('16070000', '松原市', '松原', '16000000'),
('16080000', '白城市', '白城', '16000000'),
('14000000', '内蒙古自治区', '内蒙', '0'),
('14010000', '呼和浩特市', '呼和浩特', '14000000'),
('14020000', '包头市', '包头', '14000000'),
('14030000', '乌海市', '乌海', '14000000'),