div模拟默认select效果实例分享-js教程-PHP中文网

首页

web前端

js教程

div模拟默认select效果实例分享

小云云

Mar 15, 2018 pm 04:19 PM

select 实例效果

我们在开发过程中很多时候都发现系统默认的select可能有点丑，或者有时候并不能满足UI设计的样式要求，于是就得自己写一个模拟出效果，并可以向服务端传送数据。本文主要和大家分享div模拟默认select效果实例，希望能帮助到大家。

效果如下：

这里写图片描述

代码如下：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/cs.css" disabled="true">
    <style>
        body{padding:30px;font-family: "微软雅黑";}
        li{list-style: none;}
        *{padding:0;margin:0;}
        #selector{position:relative;height:30px;width:210px;font-size:13px;line-height:30px;text-align:left;user-select:none;}
        #selector select{display:none;} 
        #selector .arrow{position:absolute;right:5px;top:12px;display:block;height:0;width:0;border-top:8px solid red;border-right:5px solid transparent;border-left:5px solid transparent;}
        #selector .mr-selector{display:block;height:30px;width:200px;padding-left:10px;border:1px solid red;cursor:default;}
        #selector .select{display:none;width:210px;margin-top:-1px;border:1px solid red;}
        #selector .select li{height:30px;line-height:30px;padding-left:10px;}
        #selector .select li:hover{background:red;color:#fff;cursor:default;}
    </style>
    <title>selector插件</title></head><body>
    <p id="selector">
        <select class="hd-selector">
            <option value="0" selected="selected">默认选项</option>
            <option value="1">选项内容一</option>
            <option value="2">选项内容二</option>
            <option value="3">选项内容三</option>
            <option value="4">选项内容四</option>
        </select>
        <span class="mr-selector">请选择选项</span>
        <span class="arrow"></span>
        <ul class="select">
            <li>请选择选项</li>
            <li>选项内容一</li>
            <li>选项内容二</li>
            <li>选项内容三</li>
            <li>选项内容四</li>
        </ul>
    </p>
    <script src="../Util/jquery-1.11.3.min.js"></script>
    <script>
        (function(){

            var selector = $("#selector");            var select = $("#selector .select");  //模拟select的ul选项
            var mrSelector = $("#selector .mr-selector");            var li = $("#selector .select li"); //li选项

            selector.click(function(eve){
                eve.stopPropagation();   //阻止冒泡避免点击后消失    
            });

            mrSelector.click(function(){
                select.toggle();
            });

            li.click(function(eve){
                var index = $(this).index();
                console.log(index);                var text = $(this).text();  //获取当前点击li文本
                mrSelector.text(text);      //赋值默认选项文本
                console.log($("#selector .hd-selector option"));
                selector.find(".hd-selector option").eq(index)
                    .attr("selected","selected").siblings().removeAttr("selected");
                $(this).parent().hide();

            });

            $("body").click(function(){
                select.hide();
            });

        }());    </script></body></html>

登录后复制

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7416

CakePHP 教程

1359

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

用户遭遇罕见故障三星 Watch 智能手表突现白屏问题 Apr 03, 2024 am 08:13 AM

你可能遇到过智能手机屏幕出现绿色线条的问题，即使没见过，也一定在网络上看到过相关图片。那么，智能手表屏幕变白的情况你遇见过吗？4月2日，CNMO从外媒了解到，一名Reddit用户在社交平台上分享了一张图片，展示了三星Watch系列智能手表屏幕变白的情况。该用户写道："我离开时正在充电，回来时就这样了，我尝试重启，但重启过程中屏幕还是这样。"三星Watch智能手表屏幕变白这位Reddit用户并未指明这款智能手表的具体型号。不过，从图片上看，应该是三星Watch5。此前，另一位Reddit用户也报告

九州风神阿萨辛 4S 散热器评测风冷'刺客大师”范儿 Mar 28, 2024 am 11:11 AM

说起阿萨辛ASSASSIN，相信玩家们一定会想到《刺客信条》中的各位刺客大师，不仅身手了得，而且"躬身于黑暗、服务于光明"的信条，与国内知名机箱/电源/散热器品牌九州风神（DeepCool）旗下的阿萨辛ASSASSIN系列旗舰级风冷散热器不谋而合。最近，该系列的最新产品阿萨辛ASSASSIN4S重磅上线，"西装刺客，再进阶"为高级玩家带来全新的风冷散热体验。外观一览细节满满阿萨辛4S散热器采用双塔构造+单风扇内嵌设计，外面包覆立方体造型的整流罩，整体感极强，并提供白、黑两种配色可选，满足不同色系

春日里的精致光影艺术，哈趣 H2 性价比之选 Apr 17, 2024 pm 05:07 PM

随着春天的到来，万物复苏，一切都充满了生机与活力。在这个美好的季节里，如何为家居生活增添一抹别样的色彩？哈趣H2投影仪，以其精致的设计和超高的性价比，成为了这个春天里不可或缺的一道亮丽风景。这款H2投影仪小巧玲珑却不失时尚。无论是放在客厅的电视柜上，还是卧室的床头柜旁，都能成为一道亮丽的风景线。它的机身采用了奶白色的磨砂质地，这种设计不仅让投影仪的外观更显高级，同时也增加了触感的舒适度。米色仿皮纹材质，更是为整体外观增添了一抹温馨与雅致。这种色彩与材质的搭配，既符合现代家居的审美趋势，又能够融入

航嘉 MX750P 全模组电源评测：750W 的白金实力浓缩 Mar 28, 2024 pm 03:20 PM

ITX平台以小巧的身形吸引了不少追求极致和独特美感的玩家，随着制程的提升和技术的进步，英特尔第14代酷睿和RTX40系显卡都可以在ITX平台中发挥实力，游戏玩家也对SFX电源有了更高的要求。游戏爱好者航嘉推出新的MX系列电源，在满足高性能需求的ITX平台中，MX750P全模组电源的定额功率高达750W，同时通过了80PLUS白金级认证。以下我们就带来这款电源的评测。航嘉MX750P全模组电源采用了简约时尚的设计理念，共有黑白两款供玩家选择，均采用磨砂表面处理，搭配银灰色和红色的字体有很好的质感，

七彩虹隐星 P15 24 评测：颜值性能兼具的硬核全能游戏本 Mar 06, 2024 pm 04:40 PM

在当下科技飞速发展的时代，笔记本电脑已经成为人们日常生活和工作中不可或缺的重要工具。对于那些对性能有高要求的玩家而言，拥有配置强大、性能出色的笔记本电脑才能满足其硬核需求。七彩虹隐星P15笔记本电脑凭借其卓越性能和令人惊艳的设计，成为了未来的引领者，堪称硬核笔记本的典范。七彩虹隐星P1524配备了13代英特尔酷睿i7处理器和RTX4060LaptopGPU，外观采用更时尚的宇宙飞船设计风格，同时在细节表现上也有出色表现。让我们先来了解一下这款笔记本的特点。至高搭载英特尔酷睿i7-13620H处理

轻松拿捏 4K 高清图像理解！这个多模态大模型自动分析网页海报内容，打工人简直不要太方便 Apr 23, 2024 am 08:04 AM

一个可以自动分析PDF、网页、海报、Excel图表内容的大模型，对于打工人来说简直不要太方便。上海AILab，香港中文大学等研究机构提出的InternLM-XComposer2-4KHD（简写为IXC2-4KHD）模型让这成为了现实。相比于其他多模态大模型不超过1500x1500的分辨率限制，该工作将多模态大模型的最大输入图像提升到超过4K（3840x1600）分辨率，并支持任意长宽比和336像素～4K动态分辨率变化。发布三天，该模型就登顶HuggingFace视觉问答模型热度榜单第一。轻松拿捏

使用golang进行Select Channels Go并发式编程的异步处理方法 Sep 28, 2023 pm 05:27 PM

使用golang进行SelectChannelsGo并发式编程的异步处理方法引言：并发式编程是现代软件开发中的一个重要领域，它可以有效地提高应用程序的性能和响应能力。在Go语言中，使用Channels和Select语句可以简单而高效地实现并发编程。本文将介绍如何使用golang进行SelectChannelsGo并发式编程的异步处理方法，并提供具体的

屏幕好打游戏才够爽 iQOO Neo9S Pro+ 屏幕简析 Jul 19, 2024 pm 03:53 PM

在当今智能手机市场中，屏幕素质已经成为衡量一款手机综合性能的关键指标之一。iQOO旗下的Neo系列一直致力于为用户提供出色的游戏体验和视觉享受，最新款产品iQOONeo9SPro+更是采用一块"三好护眼电竞屏"，接下来我们就来一起看看这块屏幕的素质有多出色。iQOONeo9SPro+搭载了一块1.5KOLED电竞直屏，支持从1Hz到144Hz的旗舰级LTPO自适应刷新率，意味着在显示静态内容时能够实现超低功耗的待机状态，而在游戏过程中也能智能切换至90Hz至144Hz的动态高

See all articles

div模拟默认select效果实例分享

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题