JQ—模拟select下拉列表并传参

最新推荐文章于 2021-07-30 16:08:08 发布

Poppy_LYT

最新推荐文章于 2021-07-30 16:08:08 发布

阅读量527

点赞数

分类专栏： JQ 文章标签： jQ

本文链接：https://blog.csdn.net/Poppy_LYT/article/details/91815770

版权

JQ 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JQ—模拟select下拉列表并传参

  <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				padding: 0;
    				margin: 0;
    			}
    			#box{
    				width: 200px;
    				border: 1px solid pink;
    				margin: 100px auto;
    			}
    			#box h3{
    				height: 30px;
    				background: pink;
    				color: #FFF;
    			}
    			#box li{
    				list-style: none;
    			}
    			#box ul{
    				display: none;
    			}
    		</style>
    		<script src="js/jquery-3.4.1.min.js"></script>
    	</head>
    	<body>
    		<div id="box">
    			<h3>请选择</h3>
    			<ul></ul>
    		</div>
    		<script>
    			$.fn.select = function (options) {
    				// 默认值
    				var defaults = [
    					{'name':'111'},
    					{'name':'222'},
    					{'name':'333'},
    					{'name':'444'},
    				]
    				// 继承
    				var ops = $.extend(true,defaults,options);
    				var $li = '';
    				for (var i = 0; i < ops.length; i++) {
    				// 动态创建li
    					$li += '<li>'+ops[i].name+'</li>';
    				}
    				$('#box ul').html($li);
    				var off = true;
    				// 点击空白处关闭下拉列表
    				$(window).click(function () {
    					$('ul').hide();
    					// off = true 是为了不影响$('h3').click的开关操作
    					off = true;
    				})
    				$('h3').click(function () {
    					if (off) {
    						$('ul').show();
    						$('ul li').click(function () {
    							$('h3').html($(this).html());
    						})
    					}else {
    						$('ul').hide();
    					}
    					off = !off;
    					// 阻止冒泡时间 因为$(window)也绑定了同样的事件，不写一直会找到$(window),一直是隐藏状态
    					return false;
    				})
    			}
    			// 调用select方法并传参,下拉列表值会改变
    			$('#box').select([
    				{'name':'北京'},
    				{'name':'上海'},
    				{'name':'广州'},
    				{'name':'深圳'},
    			]);
    		</script>
    	</body>
    </html>