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