您的位置：首页 > Web前端 > JQuery

jQuery获取selet中option事件

2015-10-13 17:34 615 查看

</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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： select jquery form html

相关文章推荐

新的分享

章节导航