HTML下拉列表select的应用场景

谁践踏了优雅 2022-03-21 04:57 353阅读 0赞

###### *最新更新时间：2019年1月30日17:50:17* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：下拉列表应用场景

#### 概述 ####

> 在常规业务开发过程中，用到下拉列表的场景比较多，如果使用HTML原生的select+option组合，很难实现定制化的UI效果，因此，只能采用模拟的方式实现定制化UI的下拉列表

#### 采用模拟的方式实现定制化UI的下拉列表 ####

![GIF模拟][GIF]

<!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;

#### 参考资料 ####

*  无

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[GIF]: /images/20220321/6e109aa569344601a2223deac1353be3.png
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460