js實現三級聯動的函式封裝
阿新 • • 發佈：2022-04-19
完整版的程式碼如下:
<!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>三級聯動</title> </head> <body> <select name="" id="province"></select> <select name="" id="city"></select> <select name="" id="district"></select> <script src="./area.js"></script> <script> /* renderOpt() 作用: 根據資料, 給某個select 渲染option 參一: select元素 型別elementObject 參二: 資料 obj 返回值: 無 */ function renderOpt(select, data) { select.innerHTML = ' '; // 先清空select if (data.constructor === Object) { for (var k in data) { // 新增option var option = document.createElement('option') // 建立一個option option.innerHTML = k //給option新增文字內容 option.value = k // 給option新增value select.appendChild(option) // 將建立option新增到 select上 } } else if (Array.isArray(data)) { for (var i in data) { data[i] for (var k in data[i]) { var option = document.createElement('option') option.innerHTML = k option.value = k select.appendChild(option) } } } } /* filterOptSelected() 作用: 過濾某個select中選中的option 參一: select元素 型別 elementObject 返回值: 選中的option元素 型別: elementObject */ function filterOptSelected(select) { // var opts = document.querySelectorAll('select>option') var opts = select.options // 獲取select元素中所有的option集合 for (let i = 0; i < opts.length; i++) { // 遍歷option, 為了檢查每個option var isSelected = opts[i].selected // 獲取option值, true 選中 false 沒選中 if (isSelected) { // 當前被選中的option return opts[i] // 將選中的option元素 輸出到函式外部 } } } var province_dom = document.querySelector('#province') // 第一步: 初始化 // 1.1 初始化省資料渲染 renderOpt(province_dom, area) // 1.2 初始化市 // 1.2.1 獲取當前選中的是哪個省 var pro_opt = filterOptSelected(province_dom) console.log(pro_opt); console.log(pro_opt.value); // 1.2.2 根據省獲取渲染市的資料 var city_data = area[pro_opt.value][0] console.log(city_data); // 1.2.3 根據市資料渲染市 var city_dom = document.querySelector('#city') renderOpt(city_dom, city_data) // 1.3 初始化區 // 1.3.1 獲取當前選中的是哪個市 var city_opt = filterOptSelected(city_dom) console.log(city_opt); console.log(city_opt.value); // 1.3.2 根據市獲取渲染區的資料 var district_data = city_data[city_opt.value] console.log(district_data); // 1.3.3 根據區資料渲染區 var district_dom = document.querySelector('#district') // ??? renderOpt(district_dom, district_data) // 第二步: 當用戶更新, 省或者市 // 2.1 監聽使用者是否更換了省 province_dom.addEventListener('change', function () { // 2.1.1 獲取更新後的option var pro_opt = filterOptSelected(province_dom) // 2.1.2 根據選擇的省更新市資料 city_data = area[pro_opt.value][0] console.log(city_data); // 2.1.3 根據市資料更新市 renderOpt(city_dom, city_data) // 2.1.4 獲取當前更新的市, 得到獲取區資料的索引 var city_opt = filterOptSelected(city_dom) console.log(city_opt.value); // 2.1.5 根據市索引獲取區資料 district_data = city_data[city_opt.value] console.log(district_data); // 2.1.6 根據區資料, 渲染區 renderOpt(district_dom, district_data) }) city_dom.addEventListener('change', function () { // var pro_opt = filterOptSelected(province_dom) // var city_data = area[pro_opt.value][0] var city_opt = filterOptSelected(city_dom) var district_data = city_data[city_opt.value] renderOpt(district_dom, district_data) }) </script> </body> </html>