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="provioce"> </select> <select name="" id="city"> </select> <!-- 如何實現聯動效果 --> <script src="./area.js"></script> <script> // 如何實現聯動效果 var provioce = document.querySelector('#provioce') var city = document.querySelector('#city') ranopt('#provioce', area) // 初始化市 // 1: 獲取當前選中的省 // 2: 根據當前的省獲取市資料 var provice_init = filterOptioned(provioce) // 3: 將拿到的市資料渲染到頁面上 ranopt('#city', area[provice_init][0]) // 當用戶選擇的省發生變化時市也隨著聯動 provioce.addEventListener('change', function () { var provice_init = filterOptioned(provioce) console.log(1); ranopt('#city', area[provice_init][0]) }) // 封裝渲染頁面函式 function ranopt(str, data) { var select = document.querySelector(str) select.innerHTML = '' for (const key in data) { var option = document.createElement('option') option.innerHTML = key select.appendChild(option) } } // 過濾某個select 選中了哪一個option的value function filterOptioned(selet) { // selet.innerHTML = '' for (let i = 0; i < selet.options.length; i++) { // selected option引數 選中為true 沒選中 false if (selet.options[i].selected) { //返回option元素的value return provioce.options[i].value } } } </script> </body> </html>