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>标签中能嵌套使用其它标签吗)的更多相关文章

  1. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  2. Select下拉框onchange事件获取option的value值

    首先方法中使用到了jqury,首先导入jqury的插件: 如果jqury的小插件没有的话,就去网上下载一个吧,jqury比原生的js使用起来方便了很多,这里也提供一个我的jqury的下载地址: jqu ...

  3. jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  4. jQuery操作select下拉框的text值和value值的方法

    1.jquery获取当前选中select的text值 $("#select1").find("option:selected").text(); 2.jquer ...

  5. JavaScript获取Select下拉框Option的Value和Text值的方法

    Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...

  6. 点击select下拉框获取option的属性值

    select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...

  7. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

  8. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  9. js如何获取select下拉框的value以及文本内容

    select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...

随机推荐

  1. WebJars

    WebJarsWebJars是一个很神奇的东西,可以让大家以jar包的形式来使用前端的各种框架.组件. 什么是WebJars 什么是WebJars?WebJars是将客户端(浏览器)资源(JavaSc ...

  2. python 基础语法学习

    .注释 python单行注释以#开头 如:#!/usr/bin/env python3 #查找运行环境 多行注释有' ' '和" " " .python最具有特色的是使用 ...

  3. 【NOIP2011】 聪明的质监员

    小 T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有n个矿石,从 1 到n逐一编号,每个矿石都有自己的重量wi以及价值vi.检验矿产的流程是: 1. 给定 m个区间[Li,Ri]: 2. ...

  4. Nginx重新编译添加新模块

    找到nginx的安装包目录,如果没有的话去官网重新下载 查看ngixn版本极其编译参数 /usr/local/nginx/sbin/nginx -V 进入nginx源码目录,重新设置nginx ./c ...

  5. Linux下可以ping ip地址但无法ping域名解决方法

    分析:当前系统无法解决域名至ip地址故障. 步骤阅读 2 三:解决过程: 1.分析dns故障: 2.物理机可以ping 地址,但无法ping域名: 3.检查/etc/resolv.conf: 注: ( ...

  6. Android--性能测试关注的指标

    性能测试过程中,出现的一些问题可直接导致了用户对当前app的使用率和卸载率,如果app使用时卡顿严重或者加载页面慢,cpu占用率高,导致app闪退等问题,在测试过程中,则需特别关注性能方面的体验,ap ...

  7. selenium IDE 使用方法整理

    1.设置起始点(确定case从哪步开始执行),快捷键:S,效果图如下: 2.设置断点(case执行到添加断点处,将自动停止),快捷键:B,效果图如下: 3.设置判断点    如:百度输入ceshi,点 ...

  8. 我是庖丁,<肢解IOT平台>之物模型

    前言 物模型是对设备在云端的功能描述,包括设备的属性,数据,服务和事件. 物联网平台通过定义一种物的描述语言来描述物模型,称之为 TSL(即 Thing Specification Language) ...

  9. C# - 为值类型重定义相等性

    为什么要为值类型重定义相等性 原因主要有以下几点: 值类型默认无法使用 == 操作符,除非对它进行重写 再就是性能原因,因为值类型默认的相等性比较会使用装箱和反射,所以性能很差 根据业务需求,其实际相 ...

  10. BeetleX和Asp.net Core之webapi基础性能对比

    本文主要针对BeetleX和Asp.net Core在基础WebApi功能性能对比 测试环境描述 硬件配置:E1230V2 16G内存 10Gb带宽 操作系统:Windows server 2008 ...