效果:jquery,select树结构，并获取到父级值

最新推荐文章于 2022-08-08 15:52:24 发布

VIP文章 foxqi

最新推荐文章于 2022-08-08 15:52:24 发布

阅读量1.1k

点赞数

分类专栏：效果文章标签： select树形结构 select多级菜单 select下拉框树形结构 select下拉多级菜单

本文链接：https://blog.csdn.net/qq_38586903/article/details/89711637

版权

仿照vue的select树形，写了一个小效果，用boostrap的树形结构以及自写的获取父节点的值，做成了一个select树结构。代码很全，直接复制粘贴即可；自己引用boostrap的js和css以及jquery.js（不知道为啥，总觉得自己写的东西好像很low的样子，估计大牛写的话更容易简单易懂吧）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="./bootstrap.min.css" rel="stylesheet">
    <!--<link rel="stylesheet" href="bootstrap-submenu.css">-->
    <style>
        /*!
 * Bootstrap-submenu v1.2.7 (http://vsn4ik.github.io/bootstrap-submenu)
 * Copyright 2014 Vasily A. (https://github.com/vsn4ik)
 * Licensed under MIT (https://github.com/vsn4ik/bootstrap-submenu/blob/master/LICENSE)
 */

        .dropdown-submenu > a:after {
            content: "";
            float: right;
            margin-right: -10px
        }

        @media (min-width: 768px) {
            .dropdown-submenu {
                position: relative
            }

            .dropdown-submenu > a:after {
                margin-top: 6px;
                border-left: 4px dashed;
                border-top: 4px solid transparent;
                border-bottom: 4px solid transparent
            }

            .dropdown-submenu .dropdown-menu {
                top: 0;
                left: 100%;
                margin-top: -6px;
                border-top-left-radius: 0
            }

            .dropup .dropdown-submenu .dropdown-menu, .navbar-fixed-bottom .dropdown-submenu .dropdown-menu {
                top: auto;
                bottom: 0;
                margin-top: 0;
                margin-bottom: -6px;
                border-top-left-radius: 4px;
                border-bottom-left-radius: 0
            }
        }

        @media (max-width: 767px) {
            .dropdown-submenu > a:after {
                margin-top: 8px;
                border-top: 4px dashed;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent
            }

            .dropdown-submenu .dropdown-menu {
                position: static;
                margin-top: 0;
                border: 0;
                box-shadow: none
            }

            .btn-group > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li.dropdown-header, .btn-group > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > a, .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li.dropdown-header, .dropdown > .dropdown-menu

最低0.47元/天解锁文章

foxqi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
效果:jquery,select树结构，并获取到父级值

仿照vue的select树形，写了一个小效果，用boostrap的树形结构以及自写的获取父节点的值，做成了一个select树结构。代码很全，直接复制粘贴即可；自己引用boostrap的js和css以及jquery.js<!DOCTYPE html><html lang="zh"><head> <meta http-equiv="Content...
复制链接

扫一扫