整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css"></style>
<script type="text/javascript">
var arr_pro=["请选择省/城市","北京市","上海市","天津市","重庆市","深圳市","广东省","河南省"];
var arr_city=[
["请选择城市/地区"],
["东城区","西城区","朝阳区","宣武区","昌平区","大兴区","丰台区","海淀区"],
['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'],
['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'],
['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'],
['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'],
['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'],
['郑州市']
];
//分析思路
//1.当页面加载完成后
//2.获取id=pro和id=city这两个对象
//3.给id=pro这个对象 增加长度 它的长度是由arr_pro这个数组的长度所决定的
//4.将arr_pro数组中的每一个元素写入对应的option中
//5.给id=pro这个对象绑定onchange事件
//6.获取到选中的下标
//7.去arr_city中找对应二维数组的长度 然后将它的长度赋值给id=city这个对象
//8.将对应的二维数组中的每一个元素写入到option中
//1.当页面加载完成后
window.onload=function(){
//2.获取id=pro和id=city这两个对象
var pro_obj=document.getElementById("pro");
var city_obj=document.getElementById("city");
//3.给id=pro这个对象 增加长度
var arr_length=pro_obj.options.length=arr_pro.length;
//循环arr_pro这个数组 然后将这个数组中的每一个数组元素写入对应的option中
for(var i=0;i<arr_length;i++){
pro_obj.options[i].text=arr_pro[i];
}
//5.给id=pro这个对象绑定onchange事件
pro_obj.onchange=function(){
var selIndex=this.selectedIndex; //获取选中的下标
//给city_obj这个对象添加arr_city这个数组对应的长度
var city_length=city_obj.options.length=arr_city[selIndex].length;
//循环arr_city这个数组 然后将对应的每个数组元素写入到对应的option中
for(var i=0;i<city_length;i++){
city_obj.options[i].text=arr_city[selIndex][i];
}
}
}
</script>
</head>
<body>
<select id="pro"></select>
<select id="city">
<!--为城区下拉列表设置默认选项-->
<option>请选择城市/地区</option>
</select>
</body>
</html>
文介绍如何实现select下拉选项的联动效果，用户及部门信息一般是通过后端读取数据库返回的，用户一般都会属于某个部门，它们之间大多通过某个相同的ID进行关联，那么想当然地在前端选择用户时自然希望能够自动带出部门信息，避免多余的用户操作。
以上面的gif展示为例，要实现申请人和申请人部门的联动，必须要找到它们之间的关联，这里就是部门ID。
申请人信息中一定带有部门ID信息，我们可以在前端展现时，将申请人的部门ID信息写入到option中的data属性中，然后在js中跟踪申请人的选择改变事件，就可以获取到选中option的data值。
接着再遍历申请人部门的option元素，只要option的value值（value为申请人部门的ID）和选中申请人的部门ID相同，就设置该option为选中状态，这样就实现了自动联动申请人部门。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript实现select联动</title>
</head>
<body>
<h1>JavaScript实现select联动</h1>
<div>
<label for="user_name" class="form-label">申请人</label>
<!-- onchange跟踪select的变化事件，并将元素id传给update_user_dept -->
<select id="user_name" name="user_name" onchange="update_user_dept(this.id)">
<option value="">请选择...</option>
<!-- option中的data值记录申请人部门ID -->
<option value="张三" data="001">张三</option>
<option value="李四" data="002">李四</option>
<option value="王二麻子" data="003">王二麻子</option>
</select>
<label for="user_dept" class="form-label">申请人部门</label>
<select id="user_dept" name="user_dept">
<option value="">请选择...</option>
<option value="002">财务部</option>
<option value="001">人力部</option>
<option value="003">工程部</option>
</select>
</div>
<script src="./demo.js"></script>
</body>
</html>在demo.js定义select改变事件的处理方法update_user_dept
果您觉得该文章对您有帮助，让更多人受用，请关注“键盘码农”，转发该文章。谢谢您的支持！
今天跟大家写了一份js的联动全选的源码，代码少，清晰易懂。
效果是这样的：
点击全选下面的就会被全部全选，或者下面的被一一选择，全选按钮也会被选中。运用复选框来实现的联动全选的功能。
点击上面的复选框就会被全选
Javascript：联动全选
当下放的复选框没有被全选，最上面的全选按钮未被选中
复选框联动全选js代码实现：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload=function ()
{
var oBtn1=document.getElementById('btn1');
var oBox=document.getElementById('box');
var oInputs=oBox.getElementsByTagName('input');
oBtn1.onclick=function ()
{
if (oBtn1.checked==true) {
for (var i=0; i < oInputs.length; i++) {
oInputs[i].checked=true;
}
} else {
for (var i=0; i < oInputs.length; i++) {
oInputs[i].checked=false;
}
}
}
//点击每一个input框
for (var i=0; i < oInputs.length; i++) {
oInputs[i].onclick=function ()
{
var n=0;
for (var i=0; i < oInputs.length; i++) {
if (oInputs[i].checked==true) {
n++;
}
}
if (n==oInputs.length) {
oBtn1.checked=true;
} else {
oBtn1.checked=false;
}
}
}
}
</script>
</head>
<body>
<h1>全选/全不选</h1>
<input type="checkbox" id="btn1">
<div id="box">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
</div>
</body>
</html>
相对比较简单，对于初学者应该有很好的帮助！请关注键盘码农。后期继续更新，如有什么看法请在下方评论。第一时间为您解答哦！
*请认真填写需求信息，我们会在24小时内与您取得联系。
