整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<!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小時內與您取得聯系。
