jquery编写插件实现下拉框多选和单选效果代码-html代码-BFW代码库

jquery编写插件实现下拉框多选和单选效果代码

代码语言：html

代码描述：jquery编写插件实现下拉框多选和单选效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style type="text/css">*{margin:0;padding:0;}ul,li{list-style:none;}:focus{outline:none;}input[type=text]{border:1px solid #ccc;}input[type=text]:hover,input[type=text]:focus{border-color:#57bc80;box-shadow:none;}body{padding:50px;font-size:12px;}.my-select-box{position:relative;}.my-select-box .my-select-input{height:40px;line-height:40px;padding:0 5px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2YAABzjgAA4DIAAIM2AAB5CAAAxgwAADT6AAAgbL5TJ5gAAABGSURBVHjaYvz//z8DOYCJgUzA0tnZidPK8vJyRpw24pLEpwnuVHRFhDQxMDAwMPz//x+OOzo6/iPz8WFGuocqAAAA//8DAD/sORHYg7kaAAAAAElFTkSuQmCC) right center no-repeat;padding-right:20px !important;width:100%;box-sizing:border-box;}.my-select-box .my-select-list{position:absolute;left:0;z-index:101;border:1px solid #ccc;border-top:none;max-height:120px;overflow-y:auto;display:none;background:#fff;width:100%;box-sizing:border-box;}.my-select-box .my-select-list li{height:22px;line-height:22px;padding:0 3px;cursor:pointer;margin-bottom:1px}.my-select-box .my-select-list li.choosed{background:#ccc;color:#fff;}.my-select-box .my-select-list li:hover{background:#ccc;color:#fff;}</style>
</head>
<body>
<h2>多选</h2>
<br>
<div id="multiple" class="my-select-box" style="width:500px;">
<input type="text" class="my-select-input" placeholder="可输入也可选择,输入多个时以|分隔" />
<ul class="my-select-list">
<li data-value="1">第一项</li>
<li data-value="2">第二项</li>
<li data-value="3">第三项</li>
<li data-value="4">第四项</li>
<li data-value="5">第5项</li>
<li data-value="6">第6项</li>
<li data-value="7">第7项</li>
<li data-value="8">第8项</li>
</ul>
</div>
<div style="height: 30px"></div>
<h2>单选</h2>
<br>
<div id="single" class="my-select-box" style="width:500px;">
<input type="text" class="my-select-input" placeholder="可输入也可选择" maxlength="20" />
<ul class="my-select-list">
<li data-value="1">第一项</li>
<li data-value="2">第二项</li>
<li data-value="3">第三项</li>
<li data-value="4">第四项</li>
<li data-value="5">第5项</li>
<li data-value="6">第6项</li>
<li data-value="7">第7项</li>
<li data-value="8">第8项</li>
</ul>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>
;(function($){$.fn.MySelect=function(options){var defaults={splitChar:'|',multiple:false 
 };va.........完整代码请登录后点击上方下载按钮下载查看