关于<select>标签的使用

最新推荐文章于 2025-01-11 18:58:08 发布

宅钕筱沫沫

最新推荐文章于 2025-01-11 18:58:08 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： select css 移动端

本文链接：https://blog.csdn.net/m0_37588140/article/details/71404675

本文介绍了HTML中Select标签的正确使用方法，包括如何选择已选中的选项、如何避免事件处理中的常见错误、如何通过JS更改选项状态而不触发change事件，以及如何实现带有自定义样式的Select控件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.选中的项
selected 与 selected=”selected” 的区别

在选择option时，用option:selected，不要用option[selected=selected]

示例：

<option selected="selected">1</option>
$('option[selected=selected]')//能选到
$('option:selected')//也能选到

<option selected>1</option>
$('option[selected=selected]')//不能选到
$('option:selected')//能选到

<option selected="">1</option>//这种写法option依然是被选中的
$('option[selected=selected]')//不能选到
$('option:selected')//能选到

2.加事件

给select同时加几个事件时，要分别加，不能嵌套

“点击select标签，如果select标签change的时候，要做什么”这种想法是错误的

示例：

//错误的写法
oSel.click(function(){
    oSel.change(){function(){}};
});//这样写会触发多次click和change事件

//正确的写法
oSel.click(){function(){}};
oSel.change(){function(){}};

3.通过js改变某个option为selected
注意事项：

①要记得先把所有option的selected属性移除，再改变某一个的，不然会选中不止一个
②通过js改变某个option为selected，不触发change事件

4.有设计样式的select的实现

原理：div上定位一个透明的select，div里展示select选中的内容

示例：

<div class="selectArea">
    <div class="selectCont"></div> 
    <select>
        <option></option>
        <option></option>
    </select>
</div>
//设计样式写在div.selectCont上，select标签定位，和div.selectCont一样大小
//然后加上opacity=0当select标签change时，把选中的option的内容赋给div.selectCont