jQuery获取selet中option事件

最新推荐文章于 2024-05-05 15:54:12 发布

紫雪璇雨

最新推荐文章于 2024-05-05 15:54:12 发布

阅读量573

点赞数

分类专栏： form jQuery 文章标签： select jquery form html

本文链接：https://blog.csdn.net/ly2983068126/article/details/49101631

版权

jQuery 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

form

4 篇文章 0 订阅

订阅专栏

</pre><pre>

</pre><p>用jQuery对获取select中option事件，是一件很方便的事情，自己在网上找了好久找不到合适的，自己就大概写了一下，大家觉得有什么问题，欢迎提出来！</p><p></p><p></p><p></p><pre name="code" class="html"><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="baidu-site-verification" content="VtO3sJpoSM"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="js/jquery-1.10.1.min.js" ></script>
		<style type="text/css">
			select{margin: 10px 40px;width: 150px;}
			ul li{display: none;}
			ul li div{width:150px;padding: 10px;border: #ddd solid 1px;}
			ul li div a{line-height: 30px;font-size: 14px;color: #008CD6;text-decoration: none;display: block;padding: 0;margin: 0;}
			ul li div a:hover{color: #008CD6;text-decoration: none;font-weight: 800;background: #eee;}
			.cur{display: block;}
		</style>
</head>

<body>
	<select name="" id="sel">
	    <option value="1">第一条</option>
	    <option value="2">第二条</option>
	    <option value="3">第三条</option>
	</select>
	<ul class="aaa">
	    <li class="cur">
	    	<div>
	    		<a href="#">dfsadas</a>
	    		<a href="#">dfsadas</a>
	    		<a href="#">dfsadas</a>
	    		<a href="#">dfsadas</a>
	    		<a href="#">dfsadas</a>
	    	</div>
	    </li>
	    <li>
	    	<div>
	    		<a href="#">快乐的时间安抚</a>
	    		<a href="#">快乐的时间安抚</a>
	    		<a href="#">快乐的时间安抚</a>
	    		<a href="#">快乐的时间安抚</a>
	    		<a href="#">快乐的时间安抚</a>
	    		<a href="#">快乐的时间安抚</a>
	    		<a href="#">快乐的时间安抚</a>
	    	</div>
	    </li>
	    <li>
	    	<div>
	    		<a href="#">状况来控制在岔路口 </a>
	    		<a href="#">状况来控制在岔路口 </a>
	    		<a href="#">状况来控制在岔路口 </a>
	    		<a href="#">状况来控制在岔路口 </a>
	    	</div>
	    </li>
	</ul>
	<script type="text/javascript">
		$('#sel').change(function () {
		    $('.aaa').children('li').eq($(this).val()-1).addClass('cur').siblings().removeClass('cur')
		})
	</script>
</body>
</html>

紫雪璇雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery获取selet中option事件

店小伙-产品 select{margin: 10px 40px;width: 150px;} ul li{display: none;} ul li div{width:150px;padding: 10px;border: #ddd solid 1px;} ul li div a{line-height: 30px;font-s
复制链接

扫一扫

专栏目录