用div模拟下拉列表

最新推荐文章于 2022-04-21 23:28:33 发布
最新推荐文章于 2022-04-21 23:28:33 发布
阅读量487 收藏
点赞数
分类专栏： js 文章标签： 模拟下拉列表 模拟select
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuanggudejimo/article/details/51283443
版权
<!DOCTYPE html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
.mod_select{display: none;font-size:12px;font-family:'Trebuchet MS',Verdana, sans-serif;position:absolute;left:20%;top:10%;white-space:nowrap;}
.select_label{color:#000;float:left;line-height:16px;padding-right:4px;}
.select_box{margin:0;padding:0;background:#eee;border:solid 1px #ACBABD;border-radius:2px;position:relative;list-style-type:none;float:left;height:15px;}
.select_txt{padding:0;margin-top:1px;display:inline-block;text-indent:8px;width:100%;line-height:12px;height:12px;cursor:text;overflow:hidden;color:#000;}
.select_arrow{position:absolute;float:right;top:4px;right:4px;border-style:solid;border-width:6px 4px 0px 4px;border-color:#555 #eee #eee #eee;height:0;width:0;font-size:0}
.option{margin:0;padding:0;display:none;background:#eee;width:100%;border:solid 1px #ccc;position:absolute;top:14px;left:-1px;overflow-y:auto;}
.option li{margin:0;padding:0;display:block;height:14px;line-height:14px;text-align:left;text-indent: 8px;width:100%;color:#000;}
.option li.select_hover{background:#316AC5;color:#FFF;text-decoration:none;}
</style>
</head>


<body>
<div class="mod_select">
    <span class="select_label">选择:</span>
    <div class="select_box" tabindex="0">
        <span class="select_txt">
            <text>选择全部</text>
            <strong class="select_arrow"></strong>
        </span>
        <ul class="option">
        </ul>
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// 选中后填充文本框
write_seleted = function() {
    var value = $(this).text();
    $(this).parent().siblings(".select_txt").find("text").text(value);
    $(this).parent().hide();
}
// 收起下拉列表
hide_options = function(event) {
    var eo = $(event.target);
    if (eo.attr("class")!="option" && !eo.parent(".option").length) {
        $('.option').hide();
    };
}
// 切换下拉列表的展开与收起
show_options = function(event) {
    event.stopPropagation();
    $(this).siblings('.option').toggle();
    if ($(this).siblings('.option').is(":visible")) {
        $(this).siblings('.option').find('li').mouseenter(function() {
            $(this).siblings('.select_hover').removeClass('select_hover');
            $(this).addClass('select_hover');
        });
    } else {
        $(this).siblings('.option').unbind('mouseenter');
    };
}
// 键盘按键事件
legend_select_key_down = function(event) {
    if (event.which == 13) {
        event.preventDefault();
        if ($(this).find('.option').is(":visible")) {
            $(this).find('.select_hover').click();
        } else {
            $(this).find('.select_txt').mousedown();
        };
    };
    if ($(this).find('.option').is(":visible") && (event.which == 37 || event.which == 38)) {
        event.preventDefault();
        $(this).find('.select_hover').prev().mouseenter();
        if ($(this).find('.select_hover').position().top < 0) {
            $(this).find('.option').scrollTop($(this).find('.option').scrollTop() - 14);
        };
    };
    if ($(this).find('.option').is(":visible") && (event.which == 39 || event.which == 40)) {
        event.preventDefault();
        $(this).find('.select_hover').next().mouseenter();
        if ($(this).find('.select_hover').position().top > 383) {
            $(this).find('.option').scrollTop($(this).find('.option').scrollTop() + 14);
        };
    };
}
// 求下拉列表合适的宽度
get_select_width = function(node, font_size) {
    var options = node.find("li");
    var string_length = 0;
    $.each(options, function(index) {
        var textContent = options[index].textContent;
        // 处理中文长度
        var textContent_length = textContent.replace(/[^\x00-\xff]/g,"01").length;
        if (textContent_length > string_length) {string_length = textContent_length;};
    });
    if (string_length % 2 != 0) {string_length += 1;};
    string_length = string_length * font_size / 2 + font_size / 12 * 8;
    $(".mod_select").show();
    node.show();
    if (node[0].offsetHeight > node[0].clientHeight) {
        string_length += 16; //如果下拉列表显示滚动条，加上滚动条宽度
    };
    node.hide();
    $(".mod_select").hide();
    return string_length;
}
resize_base_font_size = function(font_size) {
    $(".mod_select")[0].style.fontSize = font_size + "px";
    $(".select_label")[0].style.lineHeight = font_size + font_size / 3 + "px";
    $(".select_label")[0].style.paddingRight = font_size/3 + "px";
    $(".select_box")[0].style.height = font_size + font_size / 4 + "px";
    $(".select_box")[0].style.borderWidth = font_size / 12 + "px";
    $(".select_txt")[0].style.marginTop = font_size / 12 + "px";
    $(".select_txt")[0].style.textIndent = font_size / 12 * 8 + "px";
    $(".select_txt")[0].style.lineHeight = font_size + "px";
    $(".select_txt")[0].style.height = font_size + "px";
    $(".select_arrow")[0].style.top = font_size / 3 + "px";
    $(".select_arrow")[0].style.right = font_size / 3 + "px";
    $(".select_arrow")[0].style.borderTopWidth = font_size / 2 + "px";
    $(".select_arrow")[0].style.borderRightWidth = font_size / 3 + "px";
    $(".select_arrow")[0].style.borderLeftWidth = font_size / 3 + "px";
    $(".option")[0].style.left = font_size / -12 + "px";
    $(".option")[0].style.borderWidth = font_size / 12 + "px";
    $(".option")[0].style.top = font_size + font_size / 6 + "px";
    var select_width = get_select_width($(".option"), font_size);
    $.each($(".option li"), function() {
        $(this)[0].style.height = font_size + font_size / 6 + "px";
        $(this)[0].style.borderRightWidth = 1 + "px";
        $(this)[0].style.borderRightColor = "#ccc";
        $(this)[0].style.borderRightStyle = "solid";
        $(this)[0].style.width = select_width - 16 + "px";
        $(this)[0].style.lineHeight = font_size + font_size / 6 + "px";
        $(this)[0].style.textIndent = font_size / 12 * 8 + "px";
    });
    $(".select_box")[0].style.width = select_width + "px";
}


function init_select() {
    var option = $(".option");
    // 超出此高度显示滚动条
    option[0].style.maxHeight = "400px";
    // 添加选项
    var first_optins = ['<li  class="select_hover">选择全部</li>',
        '<li>不选全部</li>',
        '<li style="border-bottom:solid 1px #ACBABD;height:14px;padding-bottom:2px;">反选全部</li>',
        '<li style="padding-top:2px;">总量</li>',
        '<li>haohaohao.com</li>',
        '<li>hehehehehehe.cn</li>',]
    $.each(first_optins, function(index) {
        option.append(first_optins[index]);
    });
    var i;
    for (i = 0; i < 20; ++i) {
        option.append("<li>" + i + ".com</li>");
    };
    // 根据字体大小调整下拉列表大小
    var font_size = 24;
    resize_base_font_size(font_size);
    // 绑定事件
    option.parent().keydown(legend_select_key_down);
    $(".select_txt").mousedown(show_options);
    $(".option li").click(write_seleted);
    $("body").mousedown(hide_options);
    $(document).mousedown(hide_options);
    $(".mod_select").show();
}
init_select();
</script>
</body>
</html>
    旷古的寂寞
    关注
    • 0
      点赞
    • 踩
    • 0
      收藏
      觉得还不错? 一键收藏
    • 0
      评论
    专栏目录
    div模拟select自定义下拉列表框（jQuery）
    09-19
    jQuery+div+css模拟select自定义下拉列表框，简单轻巧实用。
    二级下拉列表联动 select 网页 html5
    03-30
    二级下拉列表联动 select 网页 html5 学院、专业 选择的下拉列表 下载可用！！！
    JS实现二级列表（包含下拉刷新、上拉加载更多、侧滑操作等）
    xiaoxiaoluckylucky的博客
    02-26 914
    版权声明：本文为博主原创文章，未经博主允许不得转载。http://blog.csdn.net/xiaoxiaoluckylucky/article/details/79373835本篇文章讲述的是使用js实现可收缩二级列表，包含以下特性：1，点击打开／收缩二级列表；2，列表下拉刷新数据；3，列表上拉加载更多数据；4，列表item项可侧滑操作（类似于QQ和微信）；5，数据缓存；先上效果图：进入正题，...
    div伪装select下拉列表
    小白努力走
    08-19 1万+
    html: select美化自定义下拉框样式 - 站长素材 *{margin:0;padding:0;} select{outline:none;} ul{list-style:none;} a{text-decoration:none;} select{display: none;} .select_box{font-family: "宋体"; font
    JavaScript 问题解决 —— 省市区三级联动模拟下拉框
    Lyrelion的博客
    12-14 506
    目录 1.html 结构 2.css 样式 3.js 点击事件 （重要） 最终实现效果： 1.html 结构 整体盒子中包含：外层盒子，内层模拟下拉框 // 整体盒子 <div class="city-map-select"> // 外层盒子 <div class="show-cityname"> <input type="text" readonly value="行政区划" /> .
    div 模拟下拉列表
    09-24
    创建div模拟下拉列表的基本步骤如下： 1. **HTML结构**：首先，我们需要构建HTML结构，这通常包括一个触发下拉显示的按钮或div，以及一个隐藏的div来存放下拉选项。例如： ```html <div class="custom-select"> ...
    jQuery 文本框模拟下拉列表效果
    12-10
    网页代码如下： New Web Project 提交 运行后，需要刷新一下， 才可以加载jquery ...鼠标移入时文本框的样子，当鼠标案件释放时，若光标还在div上也是这样： 鼠标按键按下时时文本框的样子： 最终效果：
    div+css 下拉列表
    09-04
    在这个特定的场景中，"div+css 下拉列表"是指利用这种方法创建交互式的下拉菜单，常用于网站导航，以提供多级分类或子菜单的展示。这种技术的关键在于实现良好的浏览器兼容性，特别是针对老旧的IE6和现代的火狐浏览...
    html下拉框显示不同div,CSS的div布局中下拉菜单的显示问题，怎样让子菜单的样式跟主菜单不同...
    weixin_32679187的博客
    06-03 257
    #navigation, #navigation li ul{list-style-type:none;}#navigation{margin:20px;}#navigation li{float:left;text-align:center;position:relative;}#navigation li a:link,#navigation li a:visited{display:bloc...
    html css 多选下拉框,jQuery多选下拉框插件
    weixin_30475939的博客
    06-03 563
    jquery.multi-select.js是一款jQuery多选下拉框插件。该插件可以将select元素转换为带checkbox的多选下拉框，非常实用。使用方法在页面中引入下面的文件。lt;link rel="stylesheet" type="text/css" href="./src/example-styles.css"gt;lt;script src="js/jquery.min.js"...
    layui多选下拉框
    热门推荐
    一抹茶-CSDN的博客
    09-05 2万+
    下载组件： layui多选下拉框下载地址 文档地址：layui多选下拉框文档地址 目录结构： html： <head> <meta charset="utf-8" /> <title>layui-select</title> <link rel="stylesheet" type="text/css" href="./layu...
    下拉多选
    cherish_all的博客
    09-28 390
    html<div class="wrap-multiselect"> <a id="select_" class="select-item layui-form-select">请选择</a> </div> <ul class="dropdown-menu tardiv" hidden=""> <li>苹果</li> <li>橘子</li> <li>香蕉</li>
    div及２级联动表的使用心得
    pingwei000的博客
    06-07 142
    2级联动表部分代码： 先将需要隐藏的内容写到以下的标签中该标签的属性写成如下格式： 以上代码表示，在div块中的代码将会被隐藏然后再javaScript代码中可写出方法使其显示,代码如下： function test(){ var a=document.getElementById("xxx"); a.style.display="block"; } 2级联动表可通过该功...
    html_25表单中的下拉列表
    蓝镜的博客
    02-15 3765
    什么是下拉列表，废话不多说，我们先来看看它的真容吧：） 记住：一定不要忘记给select标签写上name属性，否则服务器无法接收到数据哦！ 转存失败重新上传取消 那！要是我们想让用户一下选择多个选项可不可以了？ 当然可以！我们只要给select标签写上multiple属性就好。 当列表的选项很多时，我们可以通过select标签的size属性来控制显示选项的数量。例如，这里...
    初级基础HTML CSS实现二级下拉菜单
    weixin_67318211的博客
    04-21 6217
    我们在日常浏览网页时，会经常看到有二级下拉菜单列表的应用。它在我们日常网页，特别是在头部导航运用较多，那我们如何通过HTML和CSS来实现它呢？ 1.HTML部分 HTML整体部分较为简单，看到这个结构，我们可以首先想到的是运用ul列表标签和a标签来整体实现。话不多说，代码如下： <header> <ul> <li> <a href="#">英雄介绍</a> .
    简单的下拉列表的二级联动、省市
    andwey的博客
    04-24 3349
    完整的HTML <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head> <meta charset="utf-8" /> <title>注册</title> <meta name="vi...
    Bootstrap——按钮式下拉菜单、输入框组
    Shiliang1995
    06-15 1567
    <!-- 图标 --> <!-- aria-label属性表示该标签的意图 --> <!-- 如果图标纯粹当装饰作用时，可以给这些图标设置aria-hidden=“true”属性 -->
    select下拉框二级联动
    Kidd的博客
    04-16 2307
    采用Layui框架两种方法实现，差别不大一、编写jsp代码二、编写后台代码（方法一）2.1 工具类2.2 dao层2.3 编写对应xml2.4 service层2.5 serviceImp层2.6 Controller层三、编写后台代码（方法二）3.1 工具类3.2 dao层，这里返回Map3.3 编写对应xml3.4 service层3.5 serviceImp层3.6 Controller层四、效果图4.1 示例一4.2 示例二 两种方法实现，差别不大 一、编写jsp代码 <%@ taglib p
    下拉列表怎样同时选择多项不同内容_不同列表的优缺点分析
    weixin_39600510的博客
    01-29 4101
    用户常使用的列表大体分为两种，列表框与下拉列表。列表框包括三个重要组成部分：容器框、项列表和标签，列表框根据 选择类型可以分为4种表现形式单选列表框：使用这种类型的列表框，用户只能从选项列表中选择一项。多选列表框：用户可以通过在单击选项时按住Shift键来选择或取消选择一个或多个选项。带复选框的多选列表框：这种类型的列表框包括让多选功能更加明显的复选框。多选双列表框：...
    常见js实现功能单选框、复选框、通过div模拟下拉列表框...
    最新发布
    06-09
    至于通过div模拟下拉列表框，常见的做法是使用一个div作为下拉列表框的容器，然后在该div中放置一个input元素和一个ul元素。当用户点击input元素时，ul元素会显示出来，并且用户可以从中选择一个选项。选择后，选项...
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值