小麦子 发表于 2024-12-4 13:59:50

jQuery down下拉菜单选择器




插件描述：down是一款基础的下拉菜单选择器，包含了多选，单选，禁用，可清空，自定义等功能

<!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">
<title>Select 选择器</title>
<link rel="stylesheet" href="https://www.jq22.com/demo/Dropdown202403252305/css/common.css">
<link rel="stylesheet" href="https://www.jq22.com/demo/Dropdown202403252305/css/iconfont.css">
<link rel="stylesheet" href="https://www.jq22.com/demo/Dropdown202403252305/css/jquery.dropdown_select.css">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/demo/Dropdown202403252305/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>
</body>
<script>
//省份地区-多选
$('.provinces_region_box').dropdown({
    defaultdata: [{ "selected": false, "name": "全选", "id": "all" }], //默认数据-全选或不限
    data: [
      { "selected": false, "name": "北京", "id": "11000" },
      { "selected": false, "name": "天津", "id": "12000" },
      { "selected": false, "name": "河北", "id": "13000" },
      { "selected": false, "name": "山西", "id": "14000" },
      { "selected": false, "name": "内蒙古", "id": "150000" },
      { "selected": false, "name": "辽宁", "id": "210000" },
      { "selected": false, "name": "吉林", "id": "220000" },
      { "selected": false, "name": "黑龙江", "id": "230000" },
      { "selected": false, "name": "上海", "id": "310000" },
      { "selected": false, "name": "江苏", "id": "320000" },
      { "selected": false, "name": "浙江", "id": "330000" },
      { "selected": false, "name": "安徽", "id": "340000" },
    ],
    readonly: false, //是否禁用
    searchable: false, //下拉区域是否显示搜索框
    limitCount: 2000, //限制数据总量
    multipleMode: '', // 标记项模式 空字符串：文本模式 / 'label':标记项模式 / 'unfilling':内容不填充到输入框
    choice: function (ele) { //选中返回（多选）
      console.log(ele);
    },
    del: function () {
      console.log('删除:', '初始化页面数据');
    }
});

//发布时间-单选
$('.releace_time_box').dropdown({
    defaultdata: [{ "selected": false, "name": "全部", "id": "" }],
    data: [
      { "selected": false, "name": "近7天", "id": "7" },
      { "selected": false, "name": "近一个月", "id": "30" },
      { "selected": false, "name": "近三个月", "id": "90" },
      { "selected": false, "name": "近半年", "id": "180" }
    ],
    readonly: false,
    searchable: false,
    limitCount: 2000,
    multipleMode: '',
    choice: function (ele) { //单选-直接跳链接
      console.log(ele);
    },
    del: function () {
      console.log('删除:', '初始化页面数据');
    }
});

</script>

</html>

song 发表于 2024-12-22 06:00:29

感谢分享

1633328963 发表于 2024-12-24 06:11:10

这个板子不错谢谢分享，支持牛牛论坛
页: [1]
查看完整版本: jQuery down下拉菜单选择器