html之select标签

简介:

1、下拉式单选

1
2
3
4
5
< select >
      < option  value = "=1" >上海</ option >
      < option  value = "=2"  selected = "selected" >北京</ option >
      < option  value = "=3" >广州</ option >
</ select >

wKiom1h4dhvwrxxlAADlfNFnNaI233.png


2、显示所有选项

       这里有两种,一直只能单选,一种可多选

1
2
3
4
5
6
7
8
9
10
11
  < select  size = "3" >
        < option >上海</ option >
        < option >广州</ option >
        < option >深圳</ option >
  </ select >
  
  < select  multiple = "multiple"  size = "3" >
        < option >上海</ option >
        < option >广州</ option >
        < option >深圳</ option >
  </ select >

wKiom1h4dvHDusZ7AAAdOSvcr-4666.png


3、元素分类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< select >
       < optgroup  label = "河北省" >
           < option >石家庄</ option >
           < option >邯郸</ option >
           < option >枣阳</ option >
       </ optgroup >
       < optgroup  label = "湖北省" >
           < option >武汉</ option >
           < option >咸宁</ option >
           < option >赤壁</ option >
       </ optgroup >
       < optgroup  label = "河南省" >
           < option >郑州</ option >
           < option >安阳</ option >
           < option >驻马店</ option >
       </ optgroup >
</ select >

wKioL1h4d9rBT_t3AAKwtie0Hm4138.png










本文转自 曾哥最爱 51CTO博客,原文链接:http://blog.51cto.com/zengestudy/1891759,如需转载请自行联系原作者

目录
相关文章
|
3天前
HTML中的<iframe>标签及其属性
HTML中的<iframe>标签及其属性
14 5
|
3天前
HTML中的<br>、<hr>和<pre>标签使用指南
HTML中的<br>、<hr>和<pre>标签使用指南
11 2
|
3天前
|
JavaScript UED
HTML中的<a>标签使用指南
HTML中的<a>标签使用指南
16 6
|
3天前
|
存储 前端开发 UED
HTML中的<img>标签使用指南
HTML中的<img>标签使用指南
14 3
|
4天前
|
前端开发 JavaScript 搜索推荐
HTML标签是如何定义网页内容的显示方式的?
【6月更文挑战第28天】HTML标签是如何定义网页内容的显示方式的?
9 2
|
3天前
|
Web App开发 移动开发 搜索推荐
HTML <meta> 标签及其属性介绍
HTML <meta> 标签及其属性介绍
10 1
|
3天前
|
算法 前端开发 JavaScript
HTML中的文本标签:微观排版的艺术
HTML中的文本标签:微观排版的艺术
9 1
|
4天前
|
JavaScript 前端开发 UED
HTML标签的工作原理是什么?
【6月更文挑战第28天】HTML标签的工作原理是什么?
7 1
|
17天前
|
存储 JavaScript 前端开发
HTML标签data-属性的作用
HTML标签data-属性的作用
|
17天前
|
移动开发 HTML5 前端开发
【网页搭建基石】:揭秘HTML标签的魔法世界
【网页搭建基石】:揭秘HTML标签的魔法世界