select 下拉选

最新推荐文章于 2024-12-06 16:02:33 发布
误入歧途的coder
最新推荐文章于 2024-12-06 16:02:33 发布
阅读量202
点赞数
文章标签： js
本文链接：https://blog.csdn.net/weixin_45254540/article/details/108113572
版权
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.selectBox{
				width: 400px;
				height: 36px;
				line-height: 36px;
				background: #f72323;
			}
			.inputCase{
				position: relative;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
			}
			.inputCase input.imitationSelect{
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				border: 1px solid #ccc;
				display: block;
				text-indent: 20px;
				cursor: default;
			}
			.inputCase i.fa{
				position: absolute;
				right: 10px;
				top: 10px;
				color: #007AFF;
			}
			.selectUl{
				display: none;
				padding: 0;
				margin: 0;
				border-bottom: 1px solid #ccc;
				border-left: 1px solid #ccc;
				border-right: 1px solid #ccc;
			}
			.selectUl li{
				height: 36px;
				line-height: 36px;
				list-style: none;
				text-indent: 20px;
				border-bottom: 1px solid #ccc;transition: all .5s ease 0s;

			}
			.selectUl li:hover{
				background: #ddd;
			}
			.selectUl li:last-child{
				border-bottom: 0 none;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
	</head>
	<body>
		<!--
        	作者：1327910276@qq.com
        	时间：2018-06-01
        	描述：自定义select
        -->
        <div class="selectBox">
        	<div class="inputCase">
				<input class="imitationSelect" type="text" oulName="" oulId="" value="橘子" readonly/>
				<i class="fa fa-caret-down"></i>
			</div>
			<ul class="selectUl">
				<li oliName="橘子" oliId="1" class="actived_li">橘子</li>
				<li oliName="苹果" oliId="2">苹果</li>
				<li oliName="桃子" oliId="3">桃子</li>
			</ul>
        </div>
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script type="text/javascript">
			$(function(){
				$(".selectBox .imitationSelect").on("click",function(){
					$(this).parent().next().toggle();//ul弹窗展开
					$(this).next().toggleClass("fa-caret-up")//点击input选择适合，小图标动态切换
					if (event.stopPropagation) {   
			        	// 针对 Mozilla 和 Opera   
			        	event.stopPropagation();   
			        }else if (window.event) {   
			        	// 针对 IE   
			        	window.event.cancelBubble = true;   
			        }   /*阻止事件传播，事件从点击的元素出发，向外（window）传播，
						如果不写个阻止事件，会导致下面的document点击函数一起执行，导致显示失败*/
						
				});
				$(".selectUl li").click(function(event){
					$(this).addClass("actived_li").siblings().removeClass("actived_li");//点击当前的添加。actived_li这个类；其他的移除这个类名
					var oliName = $(this).attr("oliName");//定义一个name属性，获取点击的元素属性赋值到当前，方便动态化传值
					var oliId = $(this).attr("oliId");//定义一个id属性，获取点击的元素属性赋值到当前，方便动态化传值
					$(this).parent().prev().children().val(oliName); //把当前点击的name赋值到显示的input的val里面
					$(this).parent().prev().children().attr("oliName",oliName);//把当前点击的oliName赋值到显示的input的oliName里面
					$(this).parent().prev().children().attr("oliId",oliId);//把当前点击的oliId赋值到显示的input的oliId里面`在这里插入代码片`
				});
				$(document).click(function(event){
					$(".inputCase .fa").removeClass("fa-caret-up").addClass("fa-caret-down")//当点隐藏ul弹窗时候，把小图标恢复原状
					$(".selectUl").hide();//当点击空白处，隐藏ul弹窗
				});
				
			})
			//用$(this)来代指当前的操作对象，这样可以减少误差
		</script>
	</body>
</html>