井井客

搜索

Jquery操作表单select下拉菜单切换显示内容

JQ选项卡是我们常用的代码,而如何让Select下单菜单选择后,下面的内容也进行相应的切换呢?切图的的时间遇到了这个问题,JQ实现了一下,代码还是比较简单和好理解的。

Jquery操作表单select下拉菜单切换显示内容

Jq代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery操作表单select下拉菜单切换显示内容</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>
<div class="content">
  <select>
    <option selected="selected" value="0">切换1</option>
    <option value="1">切换2</option>
    <option value="2">切换3</option>
  </select>
  <div class="div">
    <div>默认显示内容1</div>
    <div style="display:none;">切换2后展示内容2</div>
    <div style="display:none;">切换3后展示内容3</div>
  </div>
</div>
<script>
$('select').change(function(){
	var numEle = $(this).val();
	$(this).next().find('div').eq(numEle).show().siblings().hide();
});
</script>
</body>
</html>

Jquery操作表单select下拉菜单切换显示内容

理解:当select元素change时,将当前value值赋值给numEle,查找到切换的几块内容,让第numEle个内容显示,其它隐藏。

整体理清思路,select下拉菜单切换展示出来的效果就是select元素中的option与切换的几块内容一一对应,并同时显示。
例如当第二个option被选择了,下面的第二块内容则展示同时其它内容隐藏。 如下图

Jquery操作表单select下拉菜单切换显示内容示例

需要注意的是实现代码需要注意两点
(1)option需要value属性,并且从0开始给值
(2)默认切换内容,除默认第一个展示的,其它的隐藏,用display:none;


另外对比一下我实际用的JQ:

$('.columnsSubTit select').change(function(){
	var numEle = $(this).val();
	$(this).parents('.columnsSub').children('.columnsSubCon').children('div').eq(numEle).show().siblings().hide();
});

其实大体是差不多的,但是实际中图层嵌套的较多,从select到切换的内容中间多跳了几层。

文章TAG:JQ

作者:井井客整理来源:原创
本文标题:Jquery操作表单select下拉菜单切换显示内容
本文链接:/c/2891.html

上一篇:实用的JQ遍历siblings做的遮罩显示内容
下一篇:jq不间断向上滚动代码完全兼容

文章分类

相关阅读

随便看看