本文主要是介绍javascript省级联动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一：省级联动菜单
HTML部分代码
如下图所示
有两个下拉标签组成
当select元素的option的选项发生改变时，触发onChange事件
css代码如图所示
效果如图
分析：JavaScript代码
1.第一步：回填省份下拉表
Var SFarray=[‘湖北’, ’湖南’, ‘广东’];
2获取省份select元素
var SFselect = document.getElementById('province');
3. 在省份元素里添加option子元素
遍历省份数组，依次添加option子元素
for(var i=0;i<SFArray.length;i++){
创建option子元素
var SFoption = document.createElement('option');
SFoption.innerHTML = SFArray[i];
给省份option元素添加value值，联动城市回填
SFoption.value = i;
添加到SFselect元素里
SFselect.appendChild(SFoption);
}
第二步：城市下拉列表的回填
定义城市数组
var CSArray = [
['武汉', '襄阳', '荆州'],
['长沙', '株洲', '湘潭'],
['广州', '深圳', '东莞']
];
获取城市下拉列表
var CSselect = document.getElementById('city');
function SFonChange(){
回填城市下拉列表
接收省份的value，来判断选中了哪个省份
var val = SFselect.value;
将城市下拉列表的元素重置
CSselect.options.length = 1;
for(var j=0;j<CSArray[val].length;j++){
创建城市option元素
var CSoption = document.createElement('option');
给城市option元素添加城市名
CSoption.innerHTML = CSArray[val][j];
将创建好的城市option元素添加到城市select元素里
CSselect.appendChild(CSoption);
}
}
二：点击产生随机事件（星星亮起来）
效果预览；
<style>
#dv {
background: black;
width: 600px;
height: 600px;
position: relative;
}
span {
position: absolute;
font-size: 30px;
}
</style>
</head>
<body>
<input type="button" value="亮起来" id="btn">
<div id="dv">
</div>
<script>
window.onload = function (){
获取黑色幕布元素和按钮元素
var dv = document.getElementById('dv');
var btn = document.getElementById('btn');
btn.onclick = function (){
setInterval(function (){
添加星星到幕布里去
dv.innerHTML = '<span>⭐</span>'
产生随机left值和top值
var x = parseInt(Math.random() * 600);
var y = parseInt(Math.random() * 600);
给星星元素设置left和top值
dv.firstChild.style.left = x + 'px';
dv.firstChild.style.top = y + 'px';
}, 5);
}
}
</script>
这篇关于javascript省级联动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
