原生select框

最新推荐文章于 2024-05-03 09:55:16 发布
最新推荐文章于 2024-05-03 09:55:16 发布
阅读量1.1k 收藏
点赞数
文章标签： 原生select框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_41601299/article/details/102588244
版权

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

		*{
			padding: 0;
			margin: 0;
		}

		body{
			width: 100vw;
			height: calc(100vh - 20px);
		}

		div.select select{
			display: none;
		}

		div.select-box{
			width: 200px;
			margin: 20px 20px;
		}

		div.select-head{
			position: relative;
			height: 30px;
			width: 100%;
			display: flex;
			border: solid 1px #000;
			align-items: center;
			cursor: pointer;
		}

		div.select-head span{
			font-size: 16px;
			margin-left: 5px;
			color: #AAA;
		}

		div.select-head span.fill{
			color: #000;
		}

		div.select-head i{
			position: absolute;
			height: 16px;
			width: 16px;
			right: 5px;
			background-image: url(./arrow.png);
			background-size: 16px auto;
		}

		div.select-body{
			display: none;
			width: 100%;
			border: solid 1px #000;
			border-top: none;
		}

		div.search-input{
			position: relative;
			height: 40px;
		}

		div.search-input input{
			height: 30px;
			width: 150px;
			margin: 5px 8px;
			text-indent: 10px;
			padding-right: 30px;
		}

		div.search-input i{
			position: absolute;
			display: block;
			height: 20px;
			width: 20px;
			top: 12px;
			right: 15px;
			background-image: url(./search-normal.png);
			background-size: 20px 20px;
			cursor: pointer;
		}

		div.search-input i:hover{
			background-image: url(./search-active.png);
		}

		div.value-body{
			max-height: 150px;
			overflow: auto;
		}

		div.value-body li{
			display: flex;
			height: 24px;
			padding: 5px 5px;
			font-size: 14px;
			align-items: center;
			cursor: pointer;
		}

		div.value-body li:hover,li.active{
			background-color: #F5F6FA;
		}

		div.value-body li.none,div.none{
			display: none;
		}

		div.value-body div{
			text-align: center;
			height: 30px;
			line-height: 30px;
			color: #AAA;
		}
	</style>
	<script type="text/javascript">
		window.onload = function () {
			//清空select的value
			document.querySelector('div.select>select').value = ''

			/**
			 * 点击自定义的select框开启或收回选择框
			 */
			document.querySelector('div.select-head').onclick = function () {
				//清空输入框内容
				document.querySelector('div.search-input>input').value = ''

				document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
					if (element.classList.contains('active')) {
						element.classList = 'active'
					}else {
						element.classList = ''
					}
				});

				document.querySelector('div.value-body>div').classList = 'none'

				var select_body = document.querySelector('div.select-body')
				if (select_body.style.display == 'block') 
					select_body.style.display = 'none'
				else 
					select_body.style.display = 'block'
			};

			/**
			 * 点击空白处关闭select框
			 */
			document.onclick = function (argument) {
				if(!argument.target.classList.contains('s')){
					var select_body = document.querySelector('div.select-body')
					if (select_body.style.display == 'block') 
						select_body.style.display = 'none'
				}
			}

			/**
			 * 自定义的select的选值功能
			 */
			document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
				element.onclick = function () {
					//初始化下样式
					document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
						element.classList = ''
					});
					element.classList = 'active'
					//更新select框的value和自定义的select框的value
					var data_value = element.getAttribute('data-value')
					var select_head_span = document.querySelector('div.select-head>span')
					document.querySelector('div.select>select').value = data_value
					select_head_span.innerHTML = data_value
					if(!select_head_span.classList.contains('fill'))
						select_head_span.classList = 'fill'

					//关闭select-body
					document.querySelector('div.select-body').style.display = 'none'
				}
			});

			/**
			 * 搜素功能实现
			 */
			document.querySelector('div.search-input>input').oninput = function () {
				var input_value = document.querySelector('div.search-input>input').value
				if(input_value == '') {
					document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
						if (element.classList.contains('active')) {
							element.classList = 'active'
						}else {
							element.classList = ''
						}
					});
				}else{
					document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
						if(element.getAttribute('data-value').indexOf(input_value) == -1){
								if (element.classList.contains('active')) {
									element.classList += ' none'
								}else {
									element.classList = 'none'
								}
						}else {
							if(element.classList.contains('none')) {
								document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
									if (element.classList.contains('active')) {
										element.classList = 'active'
									}else {
										element.classList = ''
									}
								});
							}
						}
					});
				}
				//记一下结果数量
				var length = 0
				document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
					if (!element.classList.contains('none')) length++
				});
				
				if (length == 0) {
					document.querySelector('div.value-body>div').classList = ''
				}else{
					document.querySelector('div.value-body>div').classList = 'none'
				}
			}
		};
	</script>
</head>

关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。

<body>
	<div class="select">
		<select name="select-name">
			<option value="" disabled="true">请选择</option>
			<option value="选择1">选择1</option>
			<option value="选择2">选择2</option>
			<option value="选择3">选择3</option>
			<option value="选择4">选择4</option>
			<option value="选择5">选择5</option>
			<option value="选择6">选择6</option>
			<option value="选择7">选择7</option>
			<option value="选择8">选择8</option>
			<option value="选择9">选择9</option>
			<option value="选择10">选择10</option>
		</select>
		<div class="s select-box">
			<div class="s select-head">
				<span class="s">请选择</span>
				<i class="s"></i>
			</div>
			<div class="s select-body">
				<div class="s search-input">
					<input class="s" type="text" placeholder="搜索">
					<i class="s"></i>
				</div>
				<div class="s value-body">
					<li data-value="选择1">选择1</li>
					<li data-value="选择2">选择2</li>
					<li data-value="选择3">选择3</li>
					<li data-value="选择4">选择4</li>
					<li data-value="选择5">选择5</li>
					<li data-value="选择6">选择6</li>
					<li data-value="选择7">选择7</li>
					<li data-value="选择8">选择8</li>
					<li data-value="选择9">选择9</li>
					<li data-value="选择10">选择10</li>
					<div class="none">暂无匹配选项</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
csdn-Allen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生select下拉多选框展示
07-12
原生select下拉多选框展示
原生select实现多选功能
07-02
原生select实现多选功能
原生组件-select框
smallico的博客
03-09 396
1.html页面 <select class="leaveSelect"> <option value="1" label="1测试"></option> <option value="2" label="2测试"></option> <option val...
前端 -- 基础 表单标签 - 表单元素 ＜ Select ＞ ＜ textarea ＞
三毛与海子的博客
05-03 786
下拉表单元素， 文本域元素
原生select边框无法清除
weixin_42429288的1博客
12-24 873
使用了 border:none; 或者 border:0 都没有效果 解决办法： outline: none;  
原生 select 标签选择后的边框修改
前端技术
02-23 3177
左图是初始化边框样式，右图是选择后，自带了粗边框。太丑了....要去除，修改如下： select:focus-visible { /* outline: -webkit-focus-ring-color auto 1px; 这是谷歌浏览器的原生样式*/ outline: none; } ...
html原生select 下拉框
qq_34631220的博客
09-16 1986
html原生select 下拉框
原生js重写confirm和select框
wzy0507的博客
09-24 607
js封装confirm和select
浏览器原生select使用总结
编程架构三分天下：分层、分治、分时序。
08-14 1856
HTML中，浏览器原生select使用总结： onchange事件，获取/设置value，获取/设置text
原生下拉框select文字居右兼容安卓和苹果
前端小菜鸟
11-05 953
select想要文字居右显示，text-align是没有任何效果的。很多文章说用direction，但是这样写了样式之后，文字和箭头会调换位置，箭头跑到左边去了，不过苹果是不显示那个箭头的，所以苹果可以用；text-align-last是最后一行文字的对齐方式，用它可以解决安卓的，所以综上： 移动端安卓可以用（css） text-align-last:right 苹果可以用（css） d...
原生js获取select选中的值
寂寥人生
07-14 1001
var myselect = document.getElementById("myselect");　　//获取select对象 var index = myselect.selectedIndex;　　　　　　　　　//获取被选中的索引 var val = myselect.options[index].value;　　　　　　//获取被选中的值
原生js获取select下拉框选中的值
ljp188的专栏
04-06 1484
原生js方法： var myselect=document.getElementById("test"); var index=myselect.selectedIndex; var value=myselect.options[index].value; jquery方法： var options=$("#test option:selected"); options.va...
select 带搜索功能
03-06
虽然原生的`<select>`元素不支持内置搜索功能，但可以使用`<datalist>`元素来提供类似的交互。`<datalist>`与`<input>`配合使用，用户可以在输入框中键入，而`<datalist>`会显示匹配的建议： ```html <!-- ...
原生js select下拉选项框给文本框赋值代码
11-11
原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码
select框美化
07-21
"select框美化"就是这样一个主题，它旨在提升网站界面的美观度和交互性。 在本文中，我们将深入探讨如何使用`jquery-selectpicker`这个插件来实现下拉框的美化。`jquery-selectpicker`是一款基于jQuery的插件，它...
LABVIEW TCP通讯调试助手
07-29
本文接收如何利用Labview的TCP通讯工具做通讯，这里手把手教各位做一个简单的TCP通讯调试助手，可以局域网互相聊天哦！ 具体介绍见下面连接：https://download.csdn.net/download/weixin_41671635/89595897
机器学习与人工智能教程
07-29
机器学习与人工智能教程
零基础入门转录组数据分析-WGCNA(加权基因共表达网络) 配套资源
最新发布
07-29
零基础入门转录组数据分析-WGCNA(加权基因共表达网络) https://blog.csdn.net/weixin_49878699/article/details/140304846 教程配套的原始数据+代码+处理好的数据文件
树形图select框 原生js
05-12
以下是一个使用原生 JavaScript 实现树形选择框的示例代码： HTML： ```html <div id="tree-select"> <select id="tree-select-options"> <option value="">请选择</option> </select> </div> ``` JavaScript： ```js var treeData = [ { id: 1, label: "节点1", children: [ { id: 11, label: "节点1-1", children: [ { id: 111, label: "节点1-1-1", }, { id: 112, label: "节点1-1-2", }, ], }, { id: 12, label: "节点1-2", }, ], }, { id: 2, label: "节点2", children: [ { id: 21, label: "节点2-1", }, { id: 22, label: "节点2-2", }, ], }, ]; var selectOptions = document.getElementById("tree-select-options"); function generateTreeSelectOptions(data, level) { for (var i = 0; i < data.length; i++) { var option = document.createElement("option"); option.value = data[i].id; option.text = "　".repeat(level) + data[i].label; selectOptions.appendChild(option); if (data[i].children) { generateTreeSelectOptions(data[i].children, level + 1); } } } generateTreeSelectOptions(treeData, 0); ``` 该示例代码中，首先定义了一个树形数据 `treeData`，其中每个节点包含 `id` 和 `label` 属性，以及可能存在的 `children` 子节点。然后在 HTML 中定义了一个 `select` 元素，用于展示树形选择框。 接下来，在 JavaScript 中定义了一个 `generateTreeSelectOptions` 函数，用于生成树形选择框的选项。该函数接受两个参数：树形数据 `data` 和当前节点的层级 `level`。函数使用循环遍历树形数据，将每个节点作为一个选项添加到 `select` 元素中，并通过递归调用自身生成子节点的选项。 最后，在主函数中调用 `generateTreeSelectOptions` 函数，传入树形数据和初始层级 0。这样就可以生成一个树形选择框了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值