使用div模拟select下拉菜单

最新推荐文章于 2020-07-21 18:43:59 发布
最新推荐文章于 2020-07-21 18:43:59 发布
阅读量991 收藏
点赞数
分类专栏： 开发记录

摘抄自：https://www.cnblogs.com/ranran/p/div_select_css.html


代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    .mod_select{position:absolute;left:30%;top:100px;font-familY:Arial, Helvetica, sans-serif;}
    .mod_select ul{margin:0;padding:0;}
    .mod_select ul li{list-style-type:none;float:left;margin-left:20px;height:24px;}
    .select_label{color:#982F4D;float:left;line-height:24px;padding-right:10px;font-size:12px;font-weight:700;}
    .select_box{float:left;border:solid 1px #EDE7D6;color:#444;position:relative;cursor:pointer;width:165px;background:url(../select_bg.jpg) repeat-x;font-size:12px;}
    .selet_open{display:inline-block;border-left:solid 1px #E5E5E5;position:absolute;right:0;top:0;width:30px;height:24px;background:url(../select_up.jpg) no-repeat center center;}
    .select_txt{display:inline-block;padding-left:10px;width:135px;line-height:24px;height:24px;cursor:text;overflow:hidden;}
    .option{width:165px;;border:solid 1px #EDE7D6;position:absolute;top:24px;left:-1px;z-index:2;overflow:hidden;display:none;}
    .option a{display:block;height:26px;line-height:26px;text-align:left;padding:0 10px;width:100%;background:#fff;}
    .option a:hover{background:#FDE0E5;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
            $(".select_box").click(function(event){   
                event.stopPropagation();
                $(this).find(".option").toggle();
                $(this).parent().siblings().find(".option").hide();
            });
            $(document).click(function(event){
                var eo=$(event.target);
                if($(".select_box").is(":visible") && eo.attr("class")!="option" && !eo.parent(".option").length)
                $('.option').hide();                                      
            });
            /*赋值给文本框*/
            $(".option a").click(function(){
                var value=$(this).text();
                $(this).parent().siblings(".select_txt").text(value);
                $("#select_value").val(value)
             })
        })
</script>
</head>
               
<body>
<div class="mod_select">
    <ul>
        <li>
            <span class="select_label">sort buy:</span>
            <div class="select_box">
                <span class="select_txt"></span><a class="selet_open"><b></b></a>
                <div class="option">
                    <a>1</a>
                    <a>2</a>
                    <a>3</a>
                </div>
            </div>
            <br clear="all" />
        </li>
        <li>
            <span class="select_label">View:</span>
            <div class="select_box">
                <span class="select_txt"></span><a class="selet_open"></a>
                <div class="option">
                    <a>1</a>
                    <a>2</a>
                    <a>3</a>
                </div>
            </div>
        </li>
    </ul>
    <input type="hidden" id="select_value" />
</div>
</body>
</html>

TIANGE120
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div模拟下拉框效果
qq_45693559的博客
03-14 384
【代码】div模拟下拉框效果。
用div元素模拟select下拉框
weixin_41266588的博客
04-28 1250
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>测试</title> <!--jquery 记得换成自己路径下的jq文件 或者使用网络地址--> <script type="text/javascript" src="js/jque...
点击div触发select
weixin_42260975的博客
03-04 1090
点击div触发select 问题描述 图片： 原始方法：点击select调起option选择项——这里使用select但是将其默认样式去除了，因为原始样式不符合UI设计，所以使用了一个img的箭头图片。现在实现的功能就是只有点击select时才可以调起option选择项； 需要改进：点击下箭头图标也要可以调起选择项； 解决方法：因为js代码太复杂，选择简单的修改css样式的方法(也可以说我懒得改...
Div模拟select下拉菜单之：选择不同的货币改变国旗
05-18
摘要:脚本资源,Ajax/JavaScript,Select　一个网页特效，对象是Select下拉框，div模拟select下拉菜单之选择不同的货币改变国旗，公司的B2C平台需要一个一个小小的重构，其中有个货币菜单是原生的select下拉菜单，需要...
div模拟下拉菜单(select)jquery插件.gz
06-08
div+css打造select下拉菜单,可自己修改相应样式!!!
div模拟select下拉菜单美化效果
04-12
绿色下载站的div模拟select下拉菜单美化效果
div模拟select下拉菜单美化效果实例
11-17
div模拟select下拉菜单美化效果实例
用CSS和Div美化select样式的简单方法
09-25
主要介绍了用CSS和Div美化SELECT样式的简单方法,同时提到了select相关的兼容性写法,需要的朋友可以参考下
div模拟下拉框的Demo
03-19
NULL 博文链接：https://xiaoyi3317.iteye.com/blog/732072
js模拟权限选择实现代码(select操作)
10-28
权限选择页面，选择、撤回、全部选择、全部撤回
使用<div><ul><li>模拟<select>下拉框
jiaqichinese的专栏
05-29 6188
body {             padding: 0;             margin: 0;             font-size: 12px;         }         ul, li {             list-style: none;             padding: 0;             margin: 0;
004HTML-label标签select下拉列表
Gy_9543的博客
07-21 1368
label 标签为input 元素定义标注（标签） 标签用于绑定一个表单元素， 当点击label标签内的文本时，浏览器会在自动将焦点光标转到或者选择对应的表单元素上，用来增加用户体验 <label for="sex">男</label> //<!-- for属性对应id属性 --> <input type="radio" name="sex111" id="sex"> 下拉列表默认选中 selected=“selected” <select nam
div+ul 模拟select下拉
我是我家小女孩
12-08 1413
&lt;style&gt; input{ width: 100px; height: 30px; text-indent: 1em; font-size: 16px; } div{ width: 100px; /* background-color: pink; */ height: 17...
css选择器学习总结
hurricane_li的博客
03-03 267
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; &a
div 模拟select
zhaossdut的专栏
08-27 354
筛选                                                                                                                                                      普陀区                             黄浦区
获取下拉框的文本
Hai-Yang-code的博客
06-23 603
<div class="layui-form-item"> <label class="layui-form-label" style="width: auto"><span class="x-red">*</span>部门名称</label> <div class="layui-input-inline" style="width: 50%; float: right; margin-right: 20%">
简历模板简洁风简洁干练简历模板简历模板简洁风(简洁干练简历模板).zip
最新发布
06-17
在求职的征途上，一份出色的简历是你通往梦想职位的敲门砖。我们精心准备了一系列面试求职简历模板，旨在帮助你以最佳形象站在潜在雇主面前。这些简历模板不仅设计精美，而且注重内容的清晰呈现，使招聘经理一目了然地看到你的能力和经验。 我们的模板集合了多种风格与布局，无论你是应届毕业生、职场跳槽者还是行业专家，都能在这里找到适合你职业形象的简历设计。每一个模板都经过精心设计，确保你的简历在众多求职者中脱颖而出，同时保持足够的专业度和可读性。 不仅如此，我们的简历模板易于编辑，你可以根据具体职位需求快速调整内容，展现你的个人优势和职业成就。使用这些模板，将大大提高你的面试机会，并帮助你更好地表达自己的价值和潜力。 别让传统且缺乏创意的简历阻碍你迈向成功的道路。立即下载这些精美的简历模板，让你的求职之路更加顺畅，向心仪的工作迈进吧！记住，一个良好的开始是成功的一半，而一份精致的简历，正是你成功的起点。
html下拉列表插件,js+CSS实现模拟华丽的select下拉菜单效果
05-11
这里给出一个简单的实现，使用了jQuery和CSS来模拟下拉菜单效果。 HTML代码： ``` <div class="custom-select"> <select> <option value="">请选择</option> <option value="1">选项一</option> <option value="2">选项二</option> <option value="3">选项三</option> </select> </div> ``` CSS代码： ``` .custom-select { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.5; color: #333; } .custom-select select { display: none; } .custom-select::after { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); content: "\f107"; font-family: "FontAwesome"; font-size: 14px; color: #999; pointer-events: none; } .custom-select.open::after { content: "\f106"; color: #666; } .custom-select-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; display: none; max-height: 240px; overflow-y: auto; background-color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .custom-select.open .custom-select-dropdown { display: block; } .custom-select-dropdown-option { padding: 8px 12px; font-size: 14px; line-height: 1.5; color: #333; cursor: pointer; } .custom-select-dropdown-option:hover { background-color: #f5f5f5; } ``` JavaScript代码： ``` $(document).on("click", function(e) { var $target = $(e.target); if ($target.closest(".custom-select").length) { $target.closest(".custom-select").toggleClass("open"); } else { $(".custom-select").removeClass("open"); } }); $(".custom-select select").on("change", function() { var text = $(this).find("option:selected").text(); $(this).closest(".custom-select").find(".custom-select-text").text(text); }); $(".custom-select select").each(function() { var $this = $(this), numberOfOptions = $(this).children("option").length; $this.addClass("s-hidden"); $this.wrap('<div class="custom-select"></div>'); $this.after('<div class="custom-select-text">' + $this.children("option").eq(0).text() + '</div>'); var $dropdown = $('<div class="custom-select-dropdown"></div>'); for (var i = 0; i < numberOfOptions; i++) { $dropdown.append('<div class="custom-select-dropdown-option">' + $this.children("option").eq(i).text() + '</div>'); } $this.after($dropdown); }); ``` 这段代码的实现原理是： 1. 隐藏原生的下拉菜单，并在其外部包裹一个自定义的容器。 2. 在容器中添加一个显示当前选项的文本框，以及一个下拉菜单容器。 3. 遍历所有选项，把它们添加到下拉菜单容器中。 4. 绑定点击事件，让点击自定义下拉菜单的容器时，切换下拉菜单的显示状态。 5. 绑定下拉菜单选项的点击事件，让其选中对应的选项，并更新文本框的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值