基于jQuery开发的下拉控件

@.hello code

已于 2024-07-22 00:37:25 修改

阅读量211

点赞数 7

分类专栏： js jQuery插件下拉菜单文章标签： jquery javascript 前端

于 2024-07-22 00:35:52 首次发布

本文链接：https://blog.csdn.net/qq_47849576/article/details/140596740

版权

js 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

jQuery插件

1 篇文章 0 订阅

订阅专栏

下拉菜单

1 篇文章 0 订阅

订阅专栏

基于jQuery开发的下拉控件

基于jQuery开发的下拉控件

基于jQuery开发的下拉控件

支持模式

单选下拉 可根据参数自由配置单选下拉模式（options中mode:signle）；
多选下拉模式可根据参数自由配置单选下拉模式（options中mode:multiple）；

插入链接与图片

预览:
在这里插入图片描述

初始化示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery/jquery-1.8.2.js"></script>
    <script src="./js/Jy-select.js"></script>
    <link rel="stylesheet" href="./css/Jy-select.css">
    <link rel="stylesheet" href="./icon/iconfont.css">
</head>
<body>
    <div id="multi"></div>
</body>
</html>
<script>
    var s = $("#multi").JySelect({
        mode: "signle",//multiple signle
        // height: "300px",
        key: "key",
        value: "value",
        check: true,  // false, true
        view: {
            radius: false,
            theme: "green",
            separator: "-",
            input: {

            },
            panel: {

            }
        },
        data: [
            {
                key: "1",
                value: "测试1",
            },{
                key: "2",
                value: "测试2"
            },{
                key: "3",
                value: "测试3"
            }
        ],
        selected: ['1','2'],
    });
    s.addHooks("afterClick", function(detail, args) {
        // 注册钩子函数
    })
</script>