select下拉框的探索(<option></option>标签中能嵌套使用其它标签吗)
select标签大家应该经常用到,有个问题可能没怎么注意过,
select标签里面的option标签可以嵌套其它标签吗,比如i,span标签等?
经本人测试,答案是:可以嵌套其它标签,但审查元素会发现标签被剔除了,只显示了标签里面的文本
不能的原因,网上找到一个解释:
option标签在网页中并没有直接显示,而是作为下拉框的选项内容之一,
其样式是由当前浏览器决定的,所以option标签之间只会有文本内容
测试代码:
<select>
<option>测试<span style="color:red;">*</span></option>
</select>
测试截图:如下图显示,span标签被剔除了,只保留了span标签里面的 *

然后我又好奇的试了一下,把span标签写在option标签外面,select标签里面,发现span标签依然会被剔除,只保留文字,如下图:

测试代码:
<select>
<option>测试<span style="color:red;">*</span></option>
<span>测试</span>
</select>
顺便附上select基本的一些用法和HTML5新增的属性
select下拉框的探索(<option></option>标签中能嵌套使用其它标签吗)的更多相关文章
- 自定义样式的select下拉框深入探索
第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...
- Select下拉框onchange事件获取option的value值
首先方法中使用到了jqury,首先导入jqury的插件: 如果jqury的小插件没有的话,就去网上下载一个吧,jqury比原生的js使用起来方便了很多,这里也提供一个我的jqury的下载地址: jqu ...
- jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
- jQuery操作select下拉框的text值和value值的方法
1.jquery获取当前选中select的text值 $("#select1").find("option:selected").text(); 2.jquer ...
- JavaScript获取Select下拉框Option的Value和Text值的方法
Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...
- 点击select下拉框获取option的属性值
select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...
- jquery取消选择select下拉框
有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
- js如何获取select下拉框的value以及文本内容
select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...
随机推荐
- Oauth2.0 用Spring-security-oauth2
客户端通过appId,redirectUrl,在open platform打开的页面上填写正确的用户名和密码后,open platform验证通过后,会跳转到redirectUrl,此时的redire ...
- salesforce lightning零基础学习(四) 事件(component events)简单介绍
lightning component基于事件驱动模型来处理用户界面的交互.这种事件驱动模型和js的事件驱动模型也很相似,可以简单的理解成四部分: 1.事件源:产生事件的地方,可以是页面中的输入框,按 ...
- 简书markdown教程
1 支持 Markdown 的编辑器 Windows 推荐 Sublime Text 3,强大优雅的编辑器.MarkdownPad,一款可以直接预览排版效果的编辑器. Mac 推荐 Ulysess,专 ...
- React-router v4教程
在这个教程里,我们会从一个例子React应用开始学习react-router-dom.其中你会学习如何使用Link.NavLink等来实现跳转,Switch和exact实现排他路由和浏览器路径历史. ...
- Instrumentation(3)
摘要: Instrumentation 类加载过程 Instrumentation与Transformer Instrumentation与Transformer的关系 Instrumenta ...
- 【Troywar love Maths】——莫比乌斯反演
2816. Troywar loves Maths ★★☆ 输入文件:Troy_1.in 输出文件:Troy_1.out 简单对比 时间限制:1 s 内存限制:256 MB [题目描述 ...
- bzoj 2724 蒲公英 分块
分块,预处理出每两个块范围内的众数,然后在暴力枚举块外的进行比较 那么怎么知道每一个数出现的次数呢?离散后,对于每一个数,维护一个动态数组就好了 #include<cstdio> #inc ...
- 虚拟机console基础环境部署——系统基础环境
1. 概述2. 工具类安装2.1 安装vim2.2 安装tree2.3 安装expect2.4 安装lsof3. 编译环境类安装 1. 概述 本系列博客是在最小化安装CentOS6.5的基础上,通过配 ...
- 【爆料】-《卧龙岗大学毕业证书》UOW一模一样原件
☞西悉尼大学毕业证书[微/Q:865121257◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归&a ...
- 关于EffictiveC++笔记
我根据自己的理解,对原文的精华部分进行了提炼,并在一些难以理解的地方加上了自己的"可能比较准确"的「翻译」.