精华内容
下载资源
问答
  • 本文实例讲述了jquery实现漂亮的二级下拉菜单代码。分享给大家供大家参考。具体如下: 这里介绍一款基于jquery实现的网站下拉菜单,黑色风格,很漂亮,本菜单需要点击主菜单后的小三角符号才下拉出二级菜单,并不是...
  • 主要介绍了jquery实现鼠标滑过显示二级下拉菜单效果,通过jquery操作鼠标事件及页面样式动态变换实现该功能,非常具有实用价值,需要的朋友可以参考下
  • select下拉菜单,逐渐展开,展开后还可以分为二级
  • jQuery二级联动插件:jQuery.selected 一个页面可以引用多个联动效果,使用方法: 配置js: 代码如下: var defaults = { NextSelId: ‘#Select2’, SelTextId: ‘#Text1’, Separator: ‘–‘, SelStrSet: [ { name:...
  • 主要介绍了一款jQuery+PHP+MySQL三者结合实现的二级联动下拉菜单,需要的朋友可以参考下
  • jquery做的二级联动下拉列表,很有用的
  • 最近我们刚刚为大家分享过一款基于jQuery和Bootstrap的...今天我们要再为大家介绍另外一款经典的jQuery垂直手风琴二级下拉菜单,菜单的界面非常简洁,菜单项由文字和小图标组成,非常适合网站后台管理的侧边菜单栏。
  • 前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单。 使用JQuery实现需要用到的知识有: 1)使用$(function(){...})获取到想要作用的HTML元素。 2)通过使用children()方法寻找子...

    大家都知道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这个版本。

    例如: 

     
    1. <script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>

    第二种方法:直接引用在线服务器上的jQuery库文件,比如谷歌服务器jQuery库,百度服务器jQuery库等。

    例如:引用百度服务器上的jQuery库文件

     
    1. <script type="text/javascript" src="jquery/1.9.0/jquery.js"></script>

    接下来看看制作的流程:

    1. 1、调用jQuery库:编写代码,引用jquery库。由于谷歌已退出大陆,建议使用百度服务器的jQuery库。
    2. 注意: 百度服务器的jQuery库地址:http://libs.baidu.com/jquery/1.9.0/jquery.js
    3. 2 、编写显示子菜单函数,使用$,并通过class名获取一级菜单li,过children()找到li的孩子元素ul,使用show()方法,显示二级菜单。
    4. 3、编写隐藏子菜单函数,使用$,并通过class名获取一级菜单li,过children()找到li的孩子元素ul,使用hide()方法, 隐藏二级菜单。
    5. 4、做浏览器兼容性测试,至少五个浏览器。IE7,8,9,火狐,谷歌,2345浏览器等。

    先来看看效果图:

    最后我们来看看代码的情况,和前面的区别不大:

    HTML代码:

     
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2.  
    3. <html
    4. xmlns="http://www.w3.org/1999/xhtml">
    5.  
    6. <head>
    7.  
    8. <meta
    9. http-equiv="Content-Type"
    10. content="text/html; charset=gb2312" />
    11.  
    12. <title>下拉菜单</title>
    13.  
    14. <link
    15. rel="stylesheet"
    16. type="text/css"
    17. href="style.css" rel="external nofollow"
    18. />
    19.  
    20. <!--引用百度服务器的jQuery库-->
    21.  
    22. <script
    23. src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    24.  
    25. <script
    26. type="text/javascript"
    27. src="script.js"></script>
    28.  
    29. </head>
    30.  
    31.   
    32.  
    33. <body>
    34.  
    35. <div
    36. id="nav"
    37. class="nav">
    38.  
    39.   <ul>
    40.  
    41.     <li><a
    42. href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >网站首页</a></li>
    43.  
    44.    <li
    45. class="navmenu"><a
    46. href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >课程大厅</a>
    47.  
    48.     <ul>
    49.  
    50.      <li><a
    51. href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >JavaScript</a></li>
    52.  
    53.      <li><a
    54. href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >jQuery</a></li>
    55.  
    56.      <li><a
    57. href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Ajax</a></li>
    58.  
    59.     </ul>
    60.  
    61.    </li>
    62.  
    63.    <li
    64. class="navmenu"><a
    65. href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >学习中心</a>
    66.  
    67.     <ul>
    68.  
    69.      <li><a
    70. href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >视频学习</a></li>
    71.  
    72.      <li><a
    73. href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >案例学习</a></li>
    74.  
    75.      <li><a
    76. href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >交流平台</a></li>
    77.  
    78.     </ul>
    79.  
    80.    </li>
    81.  
    82.    <li><a
    83. href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >经典案例</a></li>
    84.  
    85.    <li><a
    86. href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关于我们</a></li>
    87.  
    88.   </ul>
    89.  
    90. </div>
    91.  
    92. </body>
    93.  
    94. </html>

    CSS样式表外部style.css文件代码:

     
    1. /*CSS全局设置*/
    2.  
    3. *{
    4.  
    5.  margin:0;
    6.  
    7.  padding:0;
    8.  
    9. }
    10.  
    11. .nav{
    12.  
    13.  background-color:#EEEEEE;
    14.  
    15.  height:40px;
    16.  
    17.  width:450px;
    18.  
    19.  margin:0
    20. auto;
    21.  
    22. }
    23.  
    24. ul{
    25.  
    26.  list-style:none;
    27.  
    28. }
    29.  
    30. ul li{
    31.  
    32.  float:left;
    33.  
    34.  line-height:40px;
    35.  
    36.  text-align:center;
    37.  
    38. }
    39.  
    40. a{
    41.  
    42.  text-decoration:none;
    43.  
    44.  color:#000000;
    45.  
    46.  display:block;
    47.  
    48.  width:90px;
    49.  
    50.  height:40px;
    51.  
    52. }
    53.  
    54. a:hover{
    55.  
    56.  background-color:#666666;
    57.  
    58.  color:#FFFFFF;
    59.  
    60. }
    61.  
    62. ul li ul li{
    63.  
    64.  float:none;
    65.  
    66.  background-color:#EEEEEE;
    67.  
    68. }
    69.  
    70. ul li ul{
    71.  
    72.  display:none;
    73.  
    74. }
    75.  
    76. /*为了兼容IE7写的CSS样式,但是必须写在a:hover前面*/
    77.  
    78. ul li ul li a:link,ul li ul li a:visited{
    79.  
    80.  background-color:#EEEEEE;
    81.  
    82. }
    83.  
    84. ul li ul li a:hover{
    85.  
    86.  background-color:#009933;
    87.  
    88. }

    JS脚本外部script,js文件代码:

     
    1. $(function(){
    2.  
    3.   $(".navmenu").mouseover(function(){
    4.  
    5.    $(this).children("ul").show(); 
    6.  
    7.   })
    8.  
    9.    
    10.  
    11.   $(".navmenu").mouseout(function(){
    12.  
    13.    $(this).children("ul").hide();
    14.  
    15.   })
    16.  
    17. })
    展开全文
  • 本文实例讲述了jQuery实现带延迟的二级tab切换下拉列表效果。分享给大家供大家参考。具体如下: 这是一款基于jQuery实现带延时效果的下拉列表菜单,有动画效果。 运行效果截图如下: 在线演示地址如下: ...
  • 二级联动的实现方法还真不少,实用性也很强,这里结合一个学生信息表的实例,来分享一下我的实现过程
  • 需求:选择省份时右侧自动变为相应省份下的城市列表&lt;!DOCTYPE h1 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&...

    需求:选择省份时右侧自动变为相应省份下的城市列表

    <!DOCTYPE h1 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta charset="UTF-8">
    <title>用jQuery实现下拉框的二级联动</title>
    <script src="../../resource/jquery/jquery-1.8.3.js"></script>
    <script type="text/javascript">
    
    	$(function(){
    		//1.创建一个二维数组用于存放城市
    		var cities=new Array(3);
    		cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
    		cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
    		cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
    		cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
    		
    		$("#province").change(function() {
    			//2.获取所选中的省份的下拉列表
    			var index=this.value;
    			
    			//10.清空第二个列表
    			$("#city").empty();
    			
    			//3.遍历二维数组
    			$.each(cities, function(x, cityArr) {
    				//4.判断遍历的省份和所选中的省份是否相同
    				if(index==x){
    					//5.遍历选中省份的城市列表
    					$.each(cities[x], function(y, city) {
    						//6.创建城市文本节点
    						 var textNode=document.createTextNode(city);
    						 //7.创建option节点
    						 var optionNode=document.createElement("option");
    						 //8.将城市文本节点添加到option节点中
    						 $(optionNode).append(textNode);
    						 //9.将option元素节点追加到第二个元素列表
    						 $(optionNode).appendTo($("#city"));
    					})
    				}
    			})
    			
    		})		
    		
    	})
    	
    	
    </script>
    </head>
    <body>
    	<table>
    		<tr>
    			<td>籍贯</td>
    			<td><select id="province" οnchange="changeCity(this.value)">
    					<option>--请选择--</option>
    					<option value="0">湖北</option>
    					<option value="1">湖南</option>
    					<option value="2">河北</option>
    					<option value="3">河南</option>
    			</select>
    			<select id="city">
    			</select></td>
    	</table>
    </body>
    
    </html>
    用js实现下拉列表的二级联动请看上一篇博文 哦了~  奋斗 奋斗 奋斗
    展开全文
  • jQuery实现二级联动下拉框

    千次阅读 2017-08-08 19:12:14
    jQuery实现二级联动下拉框

    项目需求,需要实现按照所选车队信息,对应司机下拉框中能够选择该车队下所有的司机信息。

    样式如下:

    <div id="takeform" title="物资提货" style="display:none;"><!-- 该Div的作用就是当点击jqGrid表格中的修改链接时弹出的dialog, 注意是在上面的Modify(id)函数中给下面的input赋值 --> 
    <form action="pickUpGoods_saveOrUpdatePickUpGoods.do" method="post" enctype="multipart/form-data">					
    <table class="exhibit_table">  				
    <tr>  
    		<td style="width:80px; padding:10px;" align="right"></td>  
    	        <td><input type="hidden" id="goodsId" name="goodsId" /></td>  
    	    </tr>
                <tr>  
    		<td style="width:80px; padding:10px;" align="right">合同号</td>  				
    <td><input type="text" id="contractNum" readonly="readonly" name="contractNum" /></td>  
    	    </tr>
    	    <tr>  
    		<td style="width:80px; padding:10px;" align="right">运输车队</td>
    		<!-- 运输车队下拉列表 -->
    		<td>
    		     <select id="Fleet" name="fleet" οnchange="getValue()" style="width:163px;">  <!--为车队下拉框绑定onchange事件,当用户改变车队选中内容时,触发onchange事件,从而获取并设置司机下拉框内容-->
    			<!--<option value ="0">--请选择--</option>
    			<option value ="2">车队2</option>
    			<option value="3">车队3</option>
    			<option value="4">车队4</option>
    			<option value="5">车队5</option>-->
    </select>
    		</td>
    	    </tr>
    	    <tr>  
    		<td style="width:80px; padding:10px;" align="right">司机</td>  
    		<!-- 运输车队下拉列表 -->
    		<td>
    		    <select id="Driver" name="driver" style="width:163px;">
    			<!--<option value ="volvo">司机一</option>
    			<option value ="saab">司机二</option>
    			<option value="opel">司机三</option>
    			<option value="audi">司机四</option>
    			<option value="audi2">司机五</option>
    		    --></select>
    		</td>  
    	    </tr> 									    
    	</table> 
        </form>
    </div>
    样式确定后,通过ajax向后台请求数据,将得到的车队信息动态加载到运输车队下拉框中,如下:

    /********取车队**********/
    		$.ajax({
    		    async:false,
    		    cache:true,
    	            type: "GET",  
    	            url: "fleet_findFleet.do", //获取json数据  
    	            success: function(result){
    			var result = eval('('+ result +')');
    			if(result != undefined && result.length > 0){
    	                    for ( var i = 0; i < result.length; i++) {
    				fleet_child={id:result[i].id, fleetName:result[i].fleetName};
    	                        var fleedValue = fleet_child.id;  
    	                        var fleedText = fleet_child.fleetName;  
    	                        var opt = "<option value='" + fleedValue + "'>" + fleedText + "</option>";  
    	                        $("#Fleet").append(opt);
    	                   } 
    	               }
                      },  
                      error: function() {  
                          alert("获取车队信息失败")  
                      }  
                  });
    由于车队信息是动态选取的,当用户没有选取车队时,直接点击司机下拉框时,此时司机下拉框是空,所以应该默认选取了某个车队信息,通过ajax向后台请求此车队下对应的司机信息,如下:

    /********取司机**********/
    		$.ajax({
    		    async:false,
    		    cache:true,
    		    url: "driver_findDriver.do?ownedFleet=1",//向后台发送请求时,默认参数为1,即请求所属车队为1下的所有司机信息
    		    type: 'GET',
    		    success: function(result){
    			//alert(result);
    			var result = eval('('+ result +')');
    			if(result != undefined && result.length > 0){
    			    var driver_child;
    			    for ( var i = 0; i < result.length; i++) {
    				driver_child = {id:result[i].id, driverName:result[i].driverName};
    				var driverValue = driver_child.id;  
    				var driverText = driver_child.driverName;  
    				var opt = "<option value='" + driverValue + "'>" + driverText + "</option>";  
    				$("#Driver").append(opt); 	 
    			    }
    			}
    		    },
    		    error:function(e){alert("获取司机信息失败");}
    		});


    默认车队信息、司机信息加载完后,需实现当用户选取某个车队时,此时司机下拉框中的信息即为此车队下所属司机的信息,如下:

    function getValue(){
    			$("#Driver").html("");
    			var obj = document.getElementById("Fleet");     //定位id
    			var index = obj.selectedIndex; 			// 选中索引
    			var fleetText = obj.options[index].text; 	// 选中文本
    			var fleetValue = obj.options[index].value; 	// 选中值
    			$.ajax({
    			    async:false,
    				cache:true,
    				data: {ownedFleet:fleetValue},		//向后台发送请求时,传递参数ownedFleet
    				url: "driver_findDriver.do",
    				type: 'POST',
    				success: function(result){
    					//alert(result);
    					var result = eval('('+ result +')');
    					if(result != undefined && result.length > 0){
    					    var driver_child;
    					    for ( var i = 0; i < result.length; i++) {
    						driver_child = {id:result[i].id, driverName:result[i].driverName};
    						var driverValue = driver_child.id;  
    					 	var driverText = driver_child.driverName;  
    						var opt = "<option value='" + driverValue + "'>" + driverText + "</option>";  
    						$("#Driver").append(opt); 	 
    					    }
    					}
    				},
    				error:function(e){alert("获取司机信息失败");}
    			});
    		    }





    展开全文
  • jQuery鼠标滑过显示二级下拉菜单代码
  • 在查询与列表显示的时候经常用到联动列表显示,比如一级选项是国家,二级选项是省,三级是市,这样的联动是联系的实时导出的,比如你不可能选择了四川省却在三级联动栏中出现济南市,这样的联动实现方法如下: ...
  • 今天有个朋友问我怎么实现,点击按钮增加一级目录,选中一级目录增加二级...这个在列表查询页很常用,可以在增加一、二级目录的事件中请求后台接口,以实现动态加载搜索条件的效果 <!DOCTYPE html> <html l...

    今天有个朋友问我怎么实现,点击按钮增加一级目录,选中一级目录增加二级目录

    然后我写了份简单的页面实现js效果,样式就不加了。

    效果图:
    在这里插入图片描述
    切换一级目录值,增加二级目录
    在这里插入图片描述
    点击按钮,增加一级目录
    在这里插入图片描述
    更换一级目录值,重新加载对应的二级目录
    在这里插入图片描述
    这个在列表查询页很常用,可以在增加一、二级目录的事件中请求后台接口,以实现动态加载搜索条件的效果

    • 注意

    在追加过程中,如果通过ajax请求后台数据,实现追加元素时,需要注意在ajax的回调函数中$(this)指代的已经不再是页面dom元素了,而是ajax对象,所以需要先在ajax外部把$(this)进行赋值操作

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    </head>
    <body>
    <table id="contain">
    	<tr>
    		<td>
    			<select name="" id="" class="sele" id="sele1">
    				<option class="opt" value="1">1</option>
    				<option class="opt" value="2">2</option>
    				<option class="opt" value="3">3</option>
    			</select>
    		</td>
    	</tr>
    </table>
    <button class="add">增加一二级目录</button>
    </body>
    </html>
    <script>
    	$('.sele').change(function(){
            $(this).nextAll().remove();
    	    html = '';
            html += '<select class="seles">';
            html += '<option class="opt" value="1">1</option>';
            html += '<option class="opt" value="2">2</option>';
            html += '<option class="opt" value="3">3</option>';
            html += '</select>';
    	    $(this).after(html);
    	});
    	$('.add').click(function(){
    	    html ='<tr><td>';
    	    html += '<select class="sele">';
    	    html += '<option class="opt" value="1">1</option>';
    	    html += '<option class="opt" value="2">2</option>';
    	    html += '<option class="opt" value="3">3</option>';
    	    html += '</select>';
    		html += '</td></tr>';
    	    $('#contain').append(html);
            $('.sele').change(function(){
                $(this).nextAll().remove();
                html = '';
                html += '<select class="seles">';
                html += '<option class="opt" value="1">1</option>';
                html += '<option class="opt" value="2">2</option>';
                html += '<option class="opt" value="3">3</option>';
                html += '</select>';
                $(this).after(html);
            });
    	})
    </script>
    
    展开全文
  • 可以放到项目中用 mutiselect 下拉多选插件 可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表,有demo
  • jquery鼠标滑过显示二级下拉菜单代码,代码完成可运行。包括html, js, css.
  • 支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第个是采用Json数据格式构建,是我的第次尝试改进 第三个与第个其实是一样的,只不过将数据分离到JS...
  • NULL 博文链接:https://nkliuliu.iteye.com/blog/983020
  • 里面包含了好多二级导航内容 当点击树形导航中的任意一个内容后,当前内容赋值给select输入框,同时下拉树形导航消失 使用方法: 1、将head中的样式引入到你的样式表中 2、将body中的代码部分拷贝...
  • <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"> <script src="city.js"></script> ;(function ($) {  $.fn.selectCity = function (options)   {  var defaults = {  ...
  • 使用jQuery制作级联下拉列表

    千次阅读 2017-11-22 11:03:19
    一 代码 fun.js // JavaScript Document ... $.get("returnpc.php?flag=p", null, function(data){ //向服务器发送GET请求,获取省份的值,并将结果追加到省份下拉列表中 $("#p").append(data);
  • 非常酷炫的jQuery+css超滑二级下拉菜单,用来做网站的朋友,一定用的上。
  • jquery二级联动下拉框

    2019-01-11 18:03:33
    jQuery代码片段 $("#line_code").change(function () { var $this = $(this); var line_code = $this.find("option:selected").val(); console.log(line_code); $.ajax({ type: "post", url: ...
  • jQuery的9种方式实现下拉列表

    千次阅读 2018-08-18 13:11:59
    利用基本动画、滑动动画、淡入淡出、自定义动画和事件实现下拉列表框。我只是将所学的知识统统实现了一遍,但是如果加上排列和组合不止这九种。(这么神奇,又在吹牛吧。)附代码如下 &lt;!DOCTYPE html&...
  • jQuery二级下拉菜单

    2018-12-03 13:46:00
    在线演示 本地下载
  • 我有一个带有已知值的下拉列表。 我正在尝试将下拉列表设置为使用jQuery知道的特定值。 使用常规JavaScript,我会做类似的事情: ddl = document.getElement

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,937
精华内容 1,974
关键字:

jquery二级下拉列表