下拉列表详解再详解,快速掌握!(内有代码)

本文创建于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:如果您觉得有用,请点赞转发,让更多人看到哦)