简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > H5教程 > 正文

HTML5的option属性：如何使用option属性实现级联下拉列表

不言
发布： 2018-08-09 14:45:08
原创
4353 人浏览过

这篇文章给大家介绍的内容是关于HTML5的option属性：如何使用option属性实现级联下拉列表，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!DOCTYPE>
<html>
<head>
<title>级联下拉列表</title>
<meta charset="UTF-8">
</head>
<body onload="load()">
<p>
<select class=&#39;prov&#39; id=&#39;prov&#39; onchange=&#39;changeCity()&#39;>
<option value=&#39;&#39;>--请选择省--</option>
</select>
<select class=&#39;city&#39; id=&#39;city&#39;>
<option value=&#39;&#39;>--请选择市--</option>
</select>
</p>
<script>
var province=document.getElementById("prov");
var city=document.getElementById("city");
var arr_prov=new Array(new Option("--请选择省--",&#39;&#39;),new Option("湖南","hn"),new Option("广东","gd"));
var arr_city=new Array();
arr_city[0]=new Array(new Option("--请选择市--",&#39;&#39;));
arr_city[1]=new Array(new Option("长沙",&#39;cs&#39;),new Option("娄底",&#39;ld&#39;),new Option("永州",&#39;yz&#39;));
arr_city[2]=new Array(new Option("广州",&#39;gz&#39;),new Option("深圳",&#39;sz&#39;)); //动态载入所有省份
function load(){ for(var i=0;i<arr_prov.length;i++){ province.options[i]=arr_prov[i]; } } //选中省份之后，根据索引动态载入相应城市 function changeCity(){
//清空上次的选项
city.options.length=0; //获取省一级的下拉列表选中的索引
var index=province.selectedIndex;
for(var i=0;i<arr_city[index].length;i++){
city.options[i]=arr_city[index][i];
} }
</script>
</body>
</html>
登录后复制

相关文章推荐：

html5自定义属性：如何获取自定义属性值（附代码）

HTML的Select对象如何进行Option对象的操作

以上是HTML5的option属性：如何使用option属性实现级联下拉列表的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
HTML5的option属性
来源：php.cn
上一篇：html5页面结构的变化以及增加和删除标签的总结 下一篇：html5的video（视频）和audio（音频）标签中的属性用法
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
如何在 CSS 中使浮动元素垂直堆叠而不是水平堆叠？ 我正在尝试制作一个包含两列的网页，一侧具有主要内容，另一侧具有额外的内容。但是因为我使用浮动属性将额外的列向左对齐，所以它水平堆叠，但我希望它垂直堆叠。我当前的代码：.topich...
来自于 2024-04-06 20:45:26
0
2
386
使用MySQL SQL查询计算另一张表中字段的总和 我有一个这样的模式：具有属性“user_id”和“username”的用户表以及具有属性“customer_id”（user_id的FK）和“finalPrice”的订单表数据库架...
来自于 2024-04-06 19:39:29
0
1
441
CSS 样式未应用于网站 我正在使用Bootstrap5制作网站，但index.css属性未应用于index.html。当我将鼠标悬停在服务卡上时，背景应该会发生变化，从而产生过渡效果。应该是从这个到这个。...
来自于 2024-04-06 17:12:23
0
1
336
JSON响应对象中添加_header属性的Endpoint 我正在测试从远程端点服务(npoint.io)提取数据。当我取回响应对象时，它会将“_headers”属性添加到我的JSON中。我想当我对JSON进行字符串化时可以删除该属性。但询...
来自于 2024-04-05 10:35:39
0
1
1376
显示选项时修改 matSelect 样式 当选项打开时如何更改mat-select的属性？<mat-selectclass="selector"><mat-option><...
来自于 2024-04-05 09:23:19
0
1
1374
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！