zoukankan      html  css  js  c++  java
  • select表单元素详解及下拉列表模拟实现

    图书馆前

    原文地址:→看过来

    写在前面

    select 是HTML表单元素中很常用的一个,其中很重要的几个属性常被忽略,但这几个属性却能帮助我们完成很多的功能,当然,select下拉列表默认样式很不友好,所以更多的时候可以自己模拟实现一个同样功能的下拉菜单。下文先介绍select标签的一些属性及使用,后面再模拟一个相同效果的下拉菜单。

    介绍之前先看下demo预览图:

    1. firefox下select的默认样式:
      firefox-default

    2. chrome下select的默认样式:
      chrome-default

    3. firefox下自定义select下拉列表的icon效果:
      firefox-self

    4. chrome下自定义select下拉列表的icon效果:
      chrome-self

    5. 原生js模拟select下拉列表的实现效果(chrome及firefox效果一致):
      模拟select

    源代码地址→传送门

    预览地址→传送门

    1. select表单元素及相关属性(我只是大自然的搬运工)

    • 提示
      select 元素是一种表单控件,可用于在表单中接受用户输入

    • 支持的全局属性

      • 仅挑几个属性
      • autofocus(其值为autofocus): 规定在页面加载后文本区域自动获得焦点。
      • disabled(值为disabled): 规定禁用该下拉列表。
      • form(值为form_id): 规定文本区域所属的一个或多个表单。
      • multiple(值为multiple): 规定可选择多个选项。
    • 支持的事件属性

      • 挑一个最常用到的额
      • onchange:当select改变选择时调用的事件句柄。(可以实现三级联动的效果)
    • selected对象的属性及方法

      • 挑几个重要的额
      • options[]:返回包含下拉列表中的所有选项的一个数组。
      • length:返回下拉列表中的选项数目。
      • selectIndex:设置或返回下拉列表中被选项目的索引号。
      • add(): 向下拉列表添加一个选项。
      • remove(): 从下拉列表中删除一个选项。
    • option标签

      • option元素定义下拉列表中的一个选项(一个条目)。
      • disabled(值为disabled):规定此选项应在首次加载时被禁用。
      • label(值为text):定义当使用 时所使用的标注。
      • selected)(值为selected):规定选项(在首次显示在列表中时)表现为选中状态。
      • value(text): 定义送往服务器的选项值。
    • option对象的属性

      • 几个比较重要的额
      • defaultSelected:返回 selected 属性的默认值。
      • disabled:设置或返回选项是否应被禁用。
      • index:返回下拉列表中某个选项的索引位置。
      • selected:设置或返回 selected 属性的值。

    注意

    1. select本身的样式可用css设置,但对option设置的样式在chrome中不起作用,在Firefox可行
    2. w3c官网的详细解释 → 传送门

    2. HTML标签自定义属性(纯属题外话)

    HTML5 data-*自定义属性:添加data-前缀使属性变成自定义属性,最大的好处是我们可以把所有自定义属性在dataset对象中统一管理。

    <div id="student" data-weight="98">点击显示</div>
    
    var student = document.getElementById("student");
    student.dataset.cm = '168'; //设置自定义属性
    var stuWeight = studdent.dataset.weight; //获取自定义属性值
    
    student.dataset.birthDate = '19980612';  //连字符的自定义属性 (例如设置data-birth-date)
    
    

    3. 自定义下拉列表的图标

    select默认样式中的下拉按钮不是很好看,我们可以自己用替张图片替换掉。(效果看文章上面的链接,请忽略我的丑丑的图标额)

    1. 对select自定义图标时需要设置apperance属性为none(隐藏原有小三角),并做兼容
    2. 加上将要替换的自定义图标即可
    select{
        -webkit-appearance: none; /*隐藏默认样式中的小三角*/
        -moz-appearance: none;
        background: url('http://opif0c56u.bkt.clouddn.com/select.gif') no-repeat scroll right 8px center; 
    }
    
    1. 可对option添加背景色
    2. 在firefox中可使用伪元素:before对option添加序号(此处插播一个css添加序号的方法)
    select{
        counter-reset: item; //类似于声明计数变量(声明在父元素中)
    }
    select option:before {
        counter-increment: item;   //要使用的计数名
        content: counter(item) " . "; //追加前置序号,chrome对option的设置中不起作用
    }
    

    4. js模拟select下拉菜单(重头戏)

    许多时候会觉得select表单特别的不好用,不能自己添加很多的样式,小伙伴们还是自己模拟一个吧!

    1. html代码结构:
    <div id="sel-wrap">
        <div id="sel-show">=请选择=</div>
        <ul id="sel-option">
            <li class="item">早上吃包子</li>
            <li class="item">中午吃米饭</li>
            <li class="item">晚上吃面条</li>
            <li class="item">宵夜吃烧烤</li>
            <li class="item">睡前喝牛奶</li>
        </ul>
    </div>
    
    1. 下拉按钮的图标跟上面自定义的方式一致(这里不再说了)。

    2. hover到li上时,利用伪元素:before追加一个对勾。

    #sel-option li:hover:before {
        content: '\2714' ' ';  //此处为对勾+空格
        }
    
    1. 下面说下实现原理:
      • 下拉菜单的选项为ul中的内容,需要先隐藏起来,且显示的时候是浮在其他内容的上面,此处需要使用position来实现。(即脱离文档流)
    #sel-wrap{
        position: relative;  //设置父元素
    }
    #sel-option{
        position: absolute;  //设置下拉列项的包裹层
    }
    
    • 点击下拉框时显示下拉列表项

    • 点击列表项时将选中值传递给下拉框并显示,同时下拉项收起(此处的点击事件绑定在父元素中)

    • 当下拉项显示并未选中任何下拉项时,点击下拉框收起下拉项

    • 当下拉项显示并未选中任何下拉项时,点击下拉项以外的任意位置,收起下拉框

    • 最终实现(样式什么的都可以随便改):

    最终样式

    小结

    1. 小花作为菜鸟第一次自己模拟下拉列表的实现,有可能存在代码欠缺,但是为了方便以后使用的时候查询,所以就记录下
    2. 欢迎大佬们指点
  • 相关阅读:
    【React Native】某个页面禁用物理返回键
    【React Native】DeviceEventEmitter监听通知及带参数传值
    转载【React Native代码】手写验证码倒计时组件
    【React Native】 中设置 APP 名称、应用图标、为安卓添加启动图
    【React Native错误集】* What went wrong: Execution failed for task ':app:installDebug'.
    【React Native错误集】Import fails with "Failed to execute 'ImportScripts' on 'WorkerGlobalScope'"
    【React Native错误集】Android error “Could not get BatchedBridge, make sure your bundle is packaged properly” on start of app
    「React Native笔记」在React的 setState 中操作数组和对象的多种方法(合集)
    【React Native】Error: Attribute application@allowBackup value=(false) from AndroidManifest.xml
    坚果云如何使用二次验证码/谷歌身份验证器/两步验证/虚拟MFA?
  • 原文地址:https://www.cnblogs.com/visugar/p/6965270.html
Copyright © 2011-2022 走看看