二级联

ゞ浴缸里的玫瑰 2022-01-05 16:19 83阅读 0赞

<!DOCTYPE html>  
<html>

<head>  
<meta charset="UTF-8">  
<title></title>  
</head>

<body>  
省份：  
<select id="selPro">  
<option>请选择省份</option>  
</select>  
<br /> 市：  
<select id="selCity">  
<option>请选择城市</option>  
</select>  
</body>  
</html>  
<script type="text/javascript">

//获取省份这个id  
var selpro = document.getElementById("selPro");

//获取市这个ID  
var selCity = document.getElementById("selCity");

//创建数组

var proArr = \["陕西", "河北", "湖南"\]  
var cityArr = \[\[\],\["安康市", "咸阳市", "西安市", "榆林"\],\["石家庄", "保定", "长廊"\],\["淳化", "长沙", "湘潭"\]\];

//触发事件  
onload = function() \{  
for(i = 0; i < proArr.length; i++) \{

//创建以option这个标签  
var op1 = document.createElement("option");

//把省这个数组放到op1这个标签中标签  
op1.innerHTML = proArr\[i\];

//添加子节点  
selpro.appendChild(op1);  
\}  
\}

selpro.οnchange= function()\{

//清除每一次选择省是出现的是内容  
selCity.length = 1;  
//省份  
var index = selpro.selectedIndex;  
//城市  
var city1 = cityArr\[index\];

for(var i in city1) \{  
var city = city1\[i\];

//创建标签节点  
var cityOption = document.createElement("option");  
cityOption.innerHTML = city;

selCity.appendChild(cityOption);  
\}  
\}  
</script>

转载于:https://www.cnblogs.com/hdj1073678089/p/7218792.html

发表评论取消回复

表情：

评论列表（有 0 条评论，83人围观）

还没有评论，来说两句吧...

相关阅读

相关 php二级级联,用php+javascript实现二级级联菜单的制作

大体思路是这样的：为了不让先前的页面刷新，我用iframe潜入了一个二级子页面，用来读取数据库中的数据，最后把想要的数据传递给父级页面，完成数据的选择和转移。主要程序代码如

以你之姓@/ 2023年01月18日 15:27/ 0 赞/ 28 阅读

相关 SpringBoot+Thymeleaf+JQuery：ajax实现二级联动、三级联动、多级联动，动态渲染下拉框

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

深碍√TFBOYSˉ_/ 2022年11月10日 05:39/ 0 赞/ 670 阅读

相关 ext_comboBox二级级联下拉框

代码示例： Ext.onReady(function()\{ var store = new Ext.data.Store(\{ proxy: new Ext.data.Ht

Bertha 。/ 2022年08月10日 11:47/ 0 赞/ 250 阅读

相关 MySQL联合查询语法内联、左联、右联、全联

MySQL联合查询效率较高，以下例子来说明联合查询（内联、左联、右联、全联）的好处： T1表结构（用户名,密码） userid（int） usernamevarc

浅浅的花香味﹌/ 2022年07月15日 12:25/ 0 赞/ 158 阅读

相关 MySQL联合查询语法内联、左联、右联、全联

MySQL联合查询效率较高，以下例子来说明联合查询（内联、左联、右联、全联）的好处： T1表结构（用户名,密码） userid（int） usernamevarc

旧城等待，/ 2022年07月15日 12:25/ 0 赞/ 199 阅读

相关 sql联合查询（内联、左联、右联、全联）

\[csharp\] [view plain][] [copy][view plain] 1. select \ from Name; ID Name 1

Myth丶恋晨/ 2022年06月04日 04:17/ 0 赞/ 197 阅读

相关 html下拉框之间的联动一级分类和二级分类

分享一下我老师大神的人工智能教程！零基础，通俗易懂！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangju

以你之姓@/ 2022年04月18日 02:44/ 0 赞/ 638 阅读

相关二级联

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <

ゞ浴缸里的玫瑰/ 2022年01月05日 16:19/ 0 赞/ 84 阅读

相关二级目录和二级域名

想把一个站发展起来，内容充实一些，是添加二级域名还是二级目录好呢？最后想了想从以下几点来分析：什么是二级域名，什么是二级目录？二级目录，就是子目录，继承在主站目录下的，

约定不等于承诺〃/ 2021年12月21日 22:23/ 0 赞/ 367 阅读

相关 MySQL联合查询语法内联、左联、右联、全联

MySQL联合查询效率较高，以下例子来说明联合查询（内联、左联、右联、全联）的好处： T1表结构（用户名,密码） userid（int） u

朴灿烈づ我的快乐病毒、/ 2021年10月26日 18:01/ 0 赞/ 228 阅读