select下拉菜单与button的互动选择

最新推荐文章于 2023-07-24 16:09:04 发布

筑梦悠然

最新推荐文章于 2023-07-24 16:09:04 发布

阅读量4.7k

点赞数 1

分类专栏：前端

前端专栏收录该内容

17 篇文章 1 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select下拉菜单与button的互动选择</title>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<style>
	select{ width:100px; height:30px; line-height:30px; border:#ccc 1px solid; border-radius:3px;}
	.btn{width:100px; height:30px; line-height:30px; background:#333; color:#fff; border:none; border-radius:3px;}
	.btn.xuanz{ background:#09F;}
</style>
</head>

<body>
  <label for="caidan"></label>
  <select name="caidan" id="caidan">
    <option>温江区</option>
    <option>双流区</option>
    <option>龙泉驿区</option>
    <option>新都区</option>
    <option>郫县</option>
    <option>青白江区</option>
  </select>
  	<button class="btn">温江区</button>
    <button class="btn">双流区</button>
    <button class="btn">龙泉驿区</button>
    <button class="btn">新都区</button>
    <button class="btn">郫县</button>
    <button class="btn">青白江区</button>
<script>
/*法一、
var ablumlistnumeber=$("#caidan option").length;
$("#btn1").addClass("xuanz");
for(i=0; i<ablumlistnumeber;i++){
	$("#btn"+(i+1)).click(function(){
		 var cityname=$(this).val();
		 $(this).siblings().removeClass("xuanz");
		 $(this).addClass("xuanz");
		 $("#caidan").children("option").each(function() {
			if($(this).text()==cityname)
			{	
			$(this).siblings().removeAttr("selected");
			$(this).attr("selected",true).prop("selected",true);
			//$(this).attr("selected",true).siblings().removeAttr("selected");
			} 
		})
	})	
}
$("#caidan").change(function(){
	//if($(this).find("option:selected")){
		var xh=$(this).children("option:selected").index();
		$("#btn"+(xh+1)).siblings().removeClass("xuanz");
		$("#btn"+(xh+1)).addClass("xuanz");
		//}
})
*/	
</script>	
<script>
//法二、
$(".btn").eq(0).addClass('xuanz')
$(".btn").click(function(){
	$(this).addClass('xuanz').siblings('.btn').removeClass('xuanz')
	$("#caidan").find("option").eq($(".btn").index($(this))).prop("selected",true) //$(this).index() 也可以找下标,prop和attr效果是一样的，无太大区别
})
$("#caidan").change(function(){
	alert($('#caidan option').index($('#caidan option:selected')))//获取索引
	$(".btn").eq($('#caidan option').index($('#caidan option:selected'))).addClass('xuanz').siblings('.btn').removeClass('xuanz')
})
</script>
</body>
</html>

转载于：http://www.qdfuns.com/notes/22982/fcfce883a7f481aa3d8731bf7b8a340f.html

筑梦悠然

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
select下拉菜单与button的互动选择

select下拉菜单与button的互动选择 select{ width:100px; height:30px; line-height:30px; border:#ccc 1px solid; border-radius:3px;} .btn{width:100px; height:30px; line-height:30px; background:#333; color:#fff;
复制链接

扫一扫