<!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. kNN(K-Nearest Neighbor)最邻近规则分类

    KNN最邻近规则,主要应用领域是对未知事物的识别,即推断未知事物属于哪一类,推断思想是,基于欧几里得定理,推断未知事物的特征和哪一类已知事物的的特征最接近: K近期邻(k-Nearest Neighb ...

  2. pytest文档28-重复执行用例（pytest-repeat）

    前言 平常在做功能测试的时候,经常会遇到某个模块不稳定,偶然会出现一些bug,对于这种问题我们会针对此用例反复执行多次,最终复现出问题来. 自动化运行用例时候,也会出现偶然的bug,可以针对单个用例, ...

  3. PHP的MySQL扩展：PHP訪问MySQL的经常使用扩展函数

    来源:http://www.ido321.com/1024.html 一.PHP连接数据库及基本操作 MySQL採用的是'客户机/server'架构.使用PHP安装的MySQL扩展函数,和直接使用cl ...

  4. 发布设置setting.xml

    <?xml version="1.0" encoding="UTF-8"?> <!-- User-specific configuration ...

  5. Android之与当前连接的wifi进行文件夹的浏览与传输

    先上传jar文件:ConnectWifi.jar.zip 上传源文件:org.zip 使用实例及相应的注释: import java.io.File; import java.net.InetAddr ...

  6. [Linux] Linux 守护进程的启动方法

    reference : http://www.ruanyifeng.com/blog/2016/02/linux-daemon.html "守护进程"(daemon)就是一直在后台 ...

  7. 启明星产品与微软Active Directory活动目录集成说明

    本文介绍启明星Helpdesk系统,如何和微软域集成. (1)确保在集成微软域之前,系统已经能够访问. (2)进入后台,用户管理页面,新加一个账户,此账户需要在微软域里(普通账户即可),然后在角色里设 ...

  8. google protocol buffer的原理和使用（二）

    本文主要会介绍怎么使用Google Protocol的Lib来序列化我们的数据,方法非常多种,本文仅仅介绍当中的三种.其它的方法读者能够通过自行研究摸索.但总的来说,序列化数据总的来说分为下面俩步: ...

  9. wiggle-subsequence

    // 参考了:https://discuss.leetcode.com/topic/51893/two-solutions-one-is-dp-the-other-is-greedy-8-lines ...

  10. bind原理图释

    (原文:http://blog.think-async.com/2010/04/bind-illustrated.html) 本文解释了bind 是如何工作的.为了清晰,我对图中的语法作了一些简化(例 ...