jquery.dropdown实现下拉单选多选框效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery.dropdown实现下拉单选多选框效果代码
代码标签: jquery dropdown 下拉 单选 多选 框
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <style> a { outline: none; } a:link, a:visited { text-decoration: none; } a:hover { text-decoration: none; } input:focus { outline: none; } .cleartfix { zoom: 1; } .cleartfix:after { content: ""; clear: both; display: block; height: 0; overflow: hidden; visibility: hidden; } </style> <link rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/fonts/dropdown/iconfont.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery.dropdown_select.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.dropdown.js"></script> <style> .select_group{padding:0 80px;}.select_box{padding:20px 0;}h2{font-weight:400;color:#1f2f3d;}p{font-size:14px;color:#5e6d82;line-height:3em;}.select_item{position:relative;margin-left:8px;width:175px;height:40px;} </style> </head> <body> <div class="select_group"> <div class="select_box"> <h2>可清空多选</h2> <p>包含清空按钮,可将选择器清空为初始状态</p> <div class="select_item provinces_region_box"> <select style="display: none;" id="provincesRegion" multiple placeholder="省份地区" name="" code=""></select> </div> </div> <div class="select_box"> <h2>可清空单选</h2> <p>包含清空按钮,可将选择器清空为初始状态</p> <div class="select_item releace_time_box"> <select style="display: none;" id="releaceTime" placeholder="发布时间" name="" code=""> </select> </div> </div> </div> <script> $('.provinces_region_box').dropdown({defaultdata:[{"select.........完整代码请登录后点击上方下载按钮下载查看
网友评论0