jquery中select标签级联问题

John_like521

于 2018-01-20 11:37:27 发布

阅读量323

点赞数

分类专栏：前端技术文章标签： jquery html 前端开发多级联动

本文链接：https://blog.csdn.net/scgyus/article/details/79113083

版权

前端技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

 关于多级联动中，获取前后节点中值的方法总结：
 
  jQuery.parent(expr)           //找父元素
  jQuery.parents(expr)          //找到所有祖先元素，不限于父元素
  jQuery.children(expr)        //查找所有子元素，只会找到直接的孩子节点，不会返回所有子孙
  jQuery.contents()            //查找下面的所有内容，包括节点和文本。
  jQuery.prev()                //查找上一个兄弟节点，不是所有的兄弟节点
  jQuery.prevAll()             //查找所有之前的兄弟节点
  jQuery.next()                //查找下一个兄弟节点，不是所有的兄弟节点
  jQuery.nextAll()             //查找所有之后的兄弟节点
  jQuery.siblings()            //查找兄弟节点，不分前后
  jQuery.find(expr)            //跟jQuery.filter(expr)完全不一样，jQuery.filter(expr)是从初始的
                            jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集中
                            筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，比如：
                            $("p").find("span")是从元素开始找，等于$("p span")
   
  在jquery 中我们可以选择$().each() 与 $.each() 进行迭代对象和数组
  
  $(items).each(function(){
       //item
  })   ,
  而后者则
    $.each(items,function(i,item){
  //write your code
  })
 例子如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<select class="sel">
			<option value="0">请选择</option>
			<option value="a">1</option>
		</select>
		<select class="sel">
			<option value="0">请选择</option>
			<option value="b">2</option>
		</select>
		<select class="sel">
			<option value="0">请选择</option>
			<option value="c">1</option>
		</select>
	</body>
	<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
	<script>
		$(function(){
			$(".sel").change(function(){
				var changestr = $(this).val();
				//获取同级前一个兄弟节点
				var prevNode = $(this).prev().val();
				//获取同级后一个兄弟节点
				var nextNode = $(this).next().val();
				//获取同级后面所有兄弟节点
				var hlength = $(this).nextAll("select").length;
				//获取同级前面所有兄弟节点
				var qlength = $(this).prevAll("select").length;
				console.log("获取当前点击事件的id值---"+changestr+"--前一个节点--"+prevNode+"--后一个节点--"+nextNode);
	           if(changestr=='0'){
	           	    console.log("对前后事件进行处理");
					var id = $(this).prev().val();
					$(this).nextAll("select").val("");
					console.log(id);
				}
				
			})
			
		})
		
	</script>
</html>

作者：scgyus

转载请注明出处：http://blog.csdn.net/scgyus/

John_like521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery中select标签级联问题

关于多级联动中，获取前后节点中值的方法总结：jQuery.parent(expr) //找父元素jQuery.parents(expr) //找到所有祖先元素，不限于父元素jQuery.children(expr) //查找所有子元素，只会找到直接的孩子节点，不会返回所有子孙jQuery.contents()
复制链接

扫一扫