select的奇葩操作总结
摘要：
世界奇葩事千千万，select操作占一半！最近原生开发中遇到一些问题，特别是select！
select原生实现二级树：
php的twig下实现占位符号错位实现
<select name="category_id" id="input-category" class="form-select mb-1">
<option value="0">{{ text_category }}</option>
{% for category_1 in categories %}
<option value="{{ category_1.category_id }}"{% if category_1.category_id == category_id %} selected{% endif %}>{{ category_1.name }}</option>
{% for category_2 in category_1.children %}
<option value="{{ category_2.category_id }}"{% if category_2.category_id == category_id %} selected{% endif %}> {{ category_2.name }}</option>
{% endfor %}
{% endfor %}
</select>
但是会有选中的值有空格，一开始是写common.js实现清除空格符号，但是select的底层是把整个option给抛回来了，所以这种占位符实现不了的！
$(document).ready(function () {
debugger
$("select").change(function () {
var str = "";
$("select option:selected").first().each(function () {
str = $(this).text().replace(/^\s+|\s+$/g, '');
});
this.text = str;
debugger
});
});
但是select的optgroup有天生的分组功能：
<select name="category_id" id="input-category" class="form-select mb-1">
<option value="0">{{ text_category }}</option>
{% for category_1 in categories %}
<option value="{{ category_1.category_id }}"{% if category_1.category_id == category_id %} selected{% endif %}>{{ category_1.name }}</option>
<optgroup>
{% for category_2 in category_1.children %}
<option value="{{ category_2.category_id }}"{% if category_2.category_id == category_id %} selected{% endif %}> {{ category_2.name }}</option>
{% endfor %}
</optgroup>
{% endfor %}
</select>
但是又有问题了：如果是多级的话？二级以上的，就只能第一种实现的，但是选中有空格。所以如果有二级以上的只能，试了一下给option添加padding-left或者margin-left,但是他们无动于衷，原生是option底层的css的规则给限制了！
但是可以自己封装一个select的组件！
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Select</title>
<style>
.select-container {
position: relative;
}
.select-container input {
width: 240px;
height: 24px;
margin-top: 15px;
line-height: 24px;
text-indent: 5px;
}
.select-container span {
/* 定位至 input 尾部 */
position: absolute;
top: 20px;
left: 220px;
/* 屏蔽点击事件 */
pointer-events: none;
}
.select-container ul {
/* 定位至 input 下面 */
position: absolute;
top: 28px;
left: 0px;
padding: 0;
/* 显示在 input 上面 */
z-index: 1;
width: 242px;
/* 默认隐藏 */
display: none;
list-style: none;
/* 边框 */
border: 1px solid #007ACC;
}
.select-container li a {
/* 使背景色占满一行 */
display: inline-block;
width: 100%;
color: #000000;
text-indent: 5px;
/* 默认背景色 */
background: #fff;
/* 去掉下划线 */
text-decoration: none;
}
.select-container li a:hover {
color: #fff;
background: #1F92E4;
}
</style>
</head>
<body>
<div class="select-container">
<span>▼</span>
<input type="text" readonly="readonly" onfocus="this.nextSibling.nextSibling.style.display='block';"
onblur="var t=this;setTimeout(()=>{t.nextSibling.nextSibling.style.display='none';},150);" />
<ul>
<li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">
<a href="http://www.baidu.com" target="_blank">测试1</a>
</li>
<li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">
<a href="javascript:;">测试2</a>
</li>
<li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">
<a href="javascript:;">测试3</a>
</li>
<li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">
<a href="javascript:;">测试4</a>
</li>
</ul>
</div>
<div class="select-container">
<span>▼</span>
<input type="text" readonly="readonly" onfocus="this.nextSibling.nextSibling.style.display='block';"
onblur="var t=this;setTimeout(()=>{t.nextSibling.nextSibling.style.display='none';},150);" />
<ul>
<li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">
<a href="http://www.baidu.com" target="_blank">测试1</a>
</li>
<li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">
<a href="javascript:;">测试2</a>
</li>
<li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">
<a href="javascript:;">测试3</a>
</li>
<li onclick="this.parentNode.previousSibling.previousSibling.value=this.innerText;">
<a href="javascript:;">测试4</a>
</li>
</ul>
</div>
</body>
<script>
window.onload = function () {
var list = document.getElementsByClassName('select-container');
for (var i = 0; i < list.length; i++) {
list[i].children[1].value = list[i].children[2].children[0].innerText.trim();
}
}
</script>
</html>
改变select里option悬停时的背景样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<style>
select:focus option:checked{
color: white;
background-image: linear-gradient(red,red);
}
option:hover {
color: #fff;
background-color: palevioletred;
}
</style>
</head>
<body>
<select multiple="multiple">
<option>111111</option>
<option>222222</option>
<option>333333</option>
<option>444444</option>
<option>555555</option>
</select>
</body>
<script>
$(document).ready(function () {
});
</script>
</html>
上一篇： 搭建网站锻炼程序员的
下一篇： 深入解析W3Scho