HTML下拉列表select的应用场景
最新更新时间：2019年1月30日17:50:17
《猛戳-查看个人博客地图-总有你意想不到的惊喜》
本文内容：下拉列表应用场景javascript
概述
在常规业务开发过程当中，用到下拉列表的场景比较多，若是使用HTML原生的select+option组合，很难实现定制化的UI效果，所以，只能采用模拟的方式实现定制化UI的下拉列表css
采用模拟的方式实现定制化UI的下拉列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } .box{ font-size: 0; } .select{ vertical-align: top; display: inline-block; } .confirm{ width: 100px; line-height: 32px; font-size: 14px; background: #CC00CC; color: #ffffff; vertical-align: top; display: inline-block; text-align: center; } #select{ width:100px; height: 30px; display: inline-block; border: 1px solid #aaaaaa; text-align: center; position: relative; padding: 0 10px; } #select > img{ width: 10px; height: 10px; transform: rotate(0deg); position: absolute; right: 5px; top: 50%; margin-top: -5px } .default_option{ font-size: 16px; line-height: 30px; } .option_list{ display: none; } .option_list > li{ font-size: 16px; width: 100px; line-height: 30px; text-align: center; } </style> </head> <body> <div class="box"> <div class="select"> <div id="select" onclick="upanddown()"> <span class="default_option">请选择</span> <img src="./img.png" alt=""> </div> <ul class="option_list"> <li data-value="1">苹果</li> <li data-value="2">西瓜</li> <li data-value="3">香蕉</li> </ul> </div> <div class="confirm" onclick="confirm()">肯定</div> </div> </body> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> var $option_list = $('.option_list') var $default_option = $('.default_option') var $img = $('#select > img') var msg = '' //伪option元素绑定事件 $('.option_list > li').on('click',function(){ var text = $(this).text() $default_option.text(text) var value = $(this).attr('data-value') msg = value //close select $option_list.css('display','none') $img.css('transform','rotate(0deg)') }) //confirm data to service function confirm(){ if(msg == '') return console.log(msg); } function upanddown(){ if($option_list.css('display') == 'none'){//open select $option_list.css('display','block') $img.css('transform','rotate(180deg)') }else{//close select $option_list.css('display','none') $img.css('transform','rotate(0deg)') } } </script> </html>
react实现原生的select+option下拉选框
import React, { Component } from 'react'; import { Link } from 'react-router-dom'; class App extends Component { constructor(props) { super(props); this.state = {} this.option = null } //原生事件回调函数 optionChange(e){ console.log(e.target.value); this.option = e.target.value } //合成事件 send(){ console.log(this.option,'has send to service') } render() { return ( <div className='box'> <select onChange={(e)=>{this.optionChange(e)}}> <option value="please choice" defaultValue>please choice</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div onClick={()=>{this.send()}}>send</div> </div> ); } } export default App;
参考资料
- 无
感谢阅读，欢迎评论^-^html