下拉列表详解再详解，快速掌握！(内有代码）

2024-04-21 01:19:49

本文创建于2020年9月，以下为正文：

这篇文章真的是详细的不能再详细了，不懂的同学们“拔刀”吧！！

下拉列表是网页中一种最节省页面空间的选择方式，默认状态下只显示一个选项，只有单击下拉按钮后才能看到全部的选项。比如说最常见的地址下拉列表。

下拉列表

结构< select>< option>< /option>< option>< /option> < /select>

其中option 是选项，可以有一个也可以有多个。

select属性包括哪些属性呢？

name属性代表的事此列表框的名称

multiple属性多选，不用赋值

size属性规定下拉列表中可见选项的数目（显示几行）

disabled属性规定禁用该下拉列表

除此之外option属性包括哪些呢？

selected属性用来指定默认的选项

value属性用来给< option>指定的那一个选项赋值，这个值是要传到服务器上的，服务器正是通过调用< select>区域的名字的value属性来获得该区域选中的数据项的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AQYHQkHt-1598948912934)(https://s1.ax1x.com/2020/08/31/dXpEuD.jpg)]

代码示例：

< body>

籍贯：

< select name="sel">

< option>请选择省份< /option>

< option>山西省< /option>

< option>山东省< /option>

< option>陕西省< /option>

< /select>

< /body>

图例：

加multiple：这是单选，要想多选就要在 < select name="sel">中添加multiple为：< select name="sel" multiple> 一般这个属性比较少一些。

加size：若< select name="sel">中添加size属性< select name="sel" size="2"> 那么得到的图例为：

只能看到两个，滚动一下就可以发现，选项是两个两个出现

加disabled：如果不想让别人去点的话，就可以在< select name="sel" disabled >

加selecte：如果下拉列表想要默认的选项，则可以添加selected属性。 < option selected>山西省< /option>

加value：如果在原本的选项上多加一个选项,例如代码为：

图例为：

接下来，下拉标签也可以这么去写

< select name="" id="">

< optgroup lable="北京">

< option>海淀区< /option>

< option>朝阳区< /option>

< option>西城区< /option>

< /optgroup>

< optgroup lable=" 河北省">

< option>海石家庄< /option>

< option>保定市< /option>

< /optgroup>

optgroup和option是父子关系

图例为：

这种方式用的比较少，大家知道就好！

（ps:如果您觉得有用，请点赞转发，让更多人看到哦）

下拉列表详解再详解，快速掌握！(内有代码）相关推荐

【C语言】初始C语言系列代码详解 _ 编程入门 _【内附代码和图片】_ [初阶篇 _ 总结复习]
[前言] 本篇文章为初始C语言部分,C语言是编程的入门语言,所以也说是编程入门: 学好C语言的入门内容,才能真正的入门编程,而C语言的学习对于刚入门的同学还是有一些难度的,需要踏踏实实的自己去理解. ...
SpringBoot详解（一）-快速入门
SpringBoot详解系列文章: SpringBoot详解(一)-快速入门 SpringBoot详解(二)-Spring Boot的核心 SpringBoot详解(三)-Spring Boot的we ...
腐烂国度2怎么学计算机知识,腐烂国度2操作方法详解教你如何快速掌握操作方法...
腐烂国度2操作方法详解教你如何快速掌握操作方法很多小伙伴买了腐烂国度2不知道怎么玩,刚上手连操作按键在哪都不知道.下面小编就为大家带来了腐烂国度2操作方法详解教你如何快速掌握操作方法. 基本操作 ...
《OSPF和IS-IS详解》一1.5 ARPANET内的路由选择
本节书摘来异步社区<OSPF和IS-IS详解>一书中的第1章,第1.5节,作者: [美]Jeff Doyle 译者: 孙余强责编: 傅道坤,更多章节内容可以访问云栖社区"异步社 ...
详解Python序列解包（3）
本文主要介绍调用函数传递参数时序列解包的用法.在调用函数传递参数时,可以在实参序列前加一个星号*进行序列解包,或在实参字典前加两个星号**进行解包,本文介绍第一种用法,第二种用法后面再单独发文介绍. ...
python停止线程池_详解python中Threadpool线程池任务终止示例代码
需求加入我们需要处理一串个位数(0~9),奇数时需要循环打印它:偶数则等待对应时长并完成所有任务:0则是错误,但不需要终止任务,可以自定义一些处理. 关键点定义func函数处理需求 callbac ...
详解Python序列解包（5）
如果一个函数需要以多种形式来接收参数,定义时一般把位置参数放在最前面,然后是默认值参数,接下来是一个星号的可变长度参数,最后是两个星号的可变长度参数:调用函数时,一般也按照这个顺序进行参数传递.调用函 ...
详解Python序列解包（4）
本文主要介绍调用函数传递参数时序列解包的用法.在定义函数时在形参前面加2个星号**表示可变长度参数,可以收集若干关键参数形式的参数传递并存放到一个字典之中.与之相对,如果实参是个字典,可以使用两个星号 ...
python评价指标_详解分类评价指标和回归评价指标以及Python代码实现
这篇文章介绍的内容是详解分类评价指标和回归评价指标以及Python代码实现,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下. 1.概念性能度量(评价)指标,主分为两大类: 1)分类评价 ...

最新文章

热门文章