select的奇葩操作总结

我就不思

于 2024-06-20 15:45:01 发布

阅读量134

点赞数 4

分类专栏： JAVASCRIPT html 文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_45788691/article/details/139800926

版权

JAVASCRIPT 同时被 2 个专栏收录

58 篇文章 4 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述
摘要：

世界奇葩事千千万，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 %}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ 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 %}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ 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>