版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wanshaobo888/article/details/86707025
最新更新时间：2019年1月30日17:50:17
《猛戳-查看我的博客地图-总有你意想不到的惊喜》
本文内容：下拉列表应用场景
概述
在常规业务开发过程中，用到下拉列表的场景比较多，如果使用HTML原生的select+option组合，很难实现定制化的UI效果，因此，只能采用模拟的方式实现定制化UI的下拉列表
采用模拟的方式实现定制化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;
参考资料
- 无
感谢阅读，欢迎评论^-^