摘要：
世界奇葩事千千万，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>
