下拉列表详解再详解,快速掌握!(内有代码)
本文创建于2020年9月,以下为正文:
这篇文章真的是详细的不能再详细了,不懂的同学们“拔刀”吧!!
下拉列表是网页中一种最节省页面空间的选择方式,默认状态下只显示一个选项,只有单击下拉按钮后才能看到全部的选项。比如说最常见的地址下拉列表。
下拉列表
结构< sele
ct>< 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:如果您觉得有用,请点赞转发,让更多人看到哦)