<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>select的placeholder和分组效果</title>

    </head>

    <body>

        <select>

            <!--placeholder 效果-->

            <option value="" disabled selected>Select your option</option>

            <!--分组效果-->

            <optgroup label='小学'>

                <option value='5'> 1年级</option>

                <option value='6'> 2年级</option>

                <option value='7'> 3年级</option>

                <option value='8'> 4年级</option>

                <option value='9'> 5年级</option>

                <option value='10'> 6年级</option>

            </optgroup>

        </select>

    </body>

</html>

效果：

select的placeholder和分组效果的更多相关文章

  1. input/select/textarea标签的readonly效果实现

    首先说一下readonly属性的应用场景 表单中,不能编辑对应的文本,但是仍然可以聚焦焦点 在提交表单的时候,该输入项会作为form的一项提交(目的) 这里要说一下disabled和readonly的 ...

  2. select元素中设置padding效果

    更新2016-9-17:这个bug是在mac os上的发生,在window系统中不存在这个问题! 给select元素增加:padding-left:20px;但是未生效,如下图所示: 在select上 ...

  3. Android 开源库StickyListHeadersListView来实现ListView列表分组效果

    项目中有一新的需求,要求能像一些Android机带"联系人列表"一样,数据可以自动分组,且在列表滑动过程中,列表头固定在顶部,效果图如下: 下面就带大家实现上面的效果, 首先,我们 ...

  4. 给select增加placeholder技巧

    转自:http://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box/8442831 使 ...

  5. 用jquery ajax做的select菜单，选中的效果

    //用server端语言赋值给js变量     var departmentId = '<%=提交的值 %>', deviceId='<%=提交的值 %>'     $(fun ...

  6. jQuery效果之封装模拟placeholder效果，让低版本浏览器也支持

    页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...

  7. LINQ简明教程：数据排序、分组、过滤

    LINQ可以对很多数据源进行查询操作,比如数据库.数组(array).链表(list).XML文件等.在本文中,我将从数组中提取数据,这些数据是10个最受欢迎的国家.有一个类叫Countries,有c ...

  8. TSQL 分组集（Grouping Sets）

    分组集(Grouping Sets)是多个分组的并集,用于在一个查询中,按照不同的分组列对集合进行聚合运算,等价于对单个分组使用“union all”,计算多个结果集的并集.使用分组集的聚合查询,返回 ...

  9. 多功能前台交互效果插件superSlide

    平时我们常用的"焦点图/幻灯片""Tab标签切换""图片滚动""无缝滚动"等效果要加载n个插件,又害怕代码冲突又怕不兼容 ...

随机推荐

  1. hadoop 2.7.1 高可用安装部署

    hadoop集群规划 目标:创建2个NameNode,做高可用,一个NameNode挂掉,另一个能够启动:一个运行Yarn,3台DataNode,3台Zookeeper集群,做高可用. 在hadoop ...

  2. IIS 未能从程序集“System.ServiceModel, Version=3.0.0.0, Culture=neutral,

    在Windows Server 2008中的IIS服务器中部署WCF服务程序时,通过浏览器访问报出如下错误: 未能从程序集“System.ServiceModel, Version=3.0.0.0, ...

  3. cocos2d-x 3.0 将cpp-tests编译成Android版本号APK文件

    cmd模式 进入到 E:\cocos2d-x-3.0rc1\cocos2d-x-3.0rc1\build 输入命令 android list targets 在输入: android-build.py ...

  4. MVC文件上传07-使用客户端jQuery-File-Upload插件和服务端Backload组件裁剪上传图片

    本篇通过在配置文件中设置,对上传图片修剪后保存到指定文件夹. 相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  MVC文件上传02-使用HttpPostedFileB ...

  5. iOS中安全结束 子线程 的方法

    一个典型的结束子线程的方法:   用 isFinished 检测子线程是否被完全kill掉 -(IBAction)btnBack:(id)sender { //释放内存 仅仅remove 并不会触发内 ...

  6. [Oracle] Insert All的妙用

    无条件的插入 Oracle中的insert all是指把同一批数据插入到不同的表中,假如如今有个需求:把t表中的数据分别插入t1,t2,假设你不知道insert all,你可能会使用insert插入2 ...

  7. go test 单元函数测试

    首先安装单元测试包,go get github.com/smartystreets/goconvey/convey 源程序如下,定义了加减乘除4个函数 package test222 import ( ...

  8. 关于JAVA多线程并发synchronized的测试与合理使用

    在项目开发中, 或许会碰到JAVA的多线程处理, 为保证业务数据的正常, 必须加上锁机制,  常用的处理方法一般是加上synchronized关键字, 目前JDK版本对synchronized已经做了 ...

  9. FizzBuzzWhizz问题python解法

    FizzBuzzWhizz 你是一名体育老师,在某次课距离下课还有五分钟时,你决定搞一个游戏.此时有100名学生在上课.游戏的规则是: 1. 你首先说出三个不同的特殊数,要求必须是个位数,比方3.5. ...

  10. Node.js安装备忘录

    一.准备工作 Node.js下载地址 http://nodejs.org/download/ Current version: v0.10.29 二.平台的选择 2.1 Windows平台 根据自己平 ...