本文介紹如何實現(xiàn)select下拉選項的聯(lián)動效果，用戶及部門信息一般是通過后端讀取數(shù)據(jù)庫返回的，用戶一般都會屬于某個部門，它們之間大多通過某個相同的ID進行關(guān)聯(lián)，那么想當然地在前端選擇用戶時自然希望能夠自動帶出部門信息，避免多余的用戶操作。
以上面的gif展示為例，要實現(xiàn)申請人和申請人部門的聯(lián)動，必須要找到它們之間的關(guān)聯(lián)，這里就是部門ID。
申請人信息中一定帶有部門ID信息，我們可以在前端展現(xiàn)時，將申請人的部門ID信息寫入到option中的data屬性中，然后在js中跟蹤申請人的選擇改變事件，就可以獲取到選中option的data值。
接著再遍歷申請人部門的option元素，只要option的value值（value為申請人部門的ID）和選中申請人的部門ID相同，就設(shè)置該option為選中狀態(tài)，這樣就實現(xiàn)了自動聯(lián)動申請人部門。
<!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實現(xiàn)select聯(lián)動</title></head><body> <h1>JavaScript實現(xiàn)select聯(lián)動</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
function update_user_dept(id) { // 根據(jù)傳參的id定位申請人select元素 var select = document.getElementById(id); // 獲取select下的所有option選項 var options = Array.from(select.options); // 獲取選中的option的data屬性值，屬性值為申請人所屬的部門id，selectedIndex為選中的option序號 var dept_id = options[select.selectedIndex].getAttribute("data"); // 獲取申請人部門select元素 var select = document.getElementById('user_dept'); // 獲取select下的所有option選項 var options = Array.from(select.options); // 遍歷option for (let i = 0; i < options.length; i++) { // 如果option的value值和選中申請人的dept_id相同 if (options[i].value == dept_id) { // 設(shè)置該option為選中狀態(tài) options[i].selected = true; } }}
