Supports control functions of any level selector cascade, level selector control functions
[Requirement]
Provide data 1:
[{Text: 'level 1 'value: '1', list: [{text: 'level 2 'value: '1. 1', list: [{text: 'level 3 'value: '1. 1.1 ', list: []},...]
Data 2:
<Pre name = "code" class = "javascript"> cascading selector element list <span style = "font-family: Arial, Helvetica, sans-serif; "> selectList, such as [select1, select2, select3,...] </span>
Key code]
Function cascade (selectList, data) {// here, selectList is a list of sub-linked selector elements, such as [select1, select2, select3,...] // TODO for (var I = 0; I <selectList. length; I ++) {var temp_data = data; for (var j = 0; j <I; j ++) {temp_data = temp_data [0]. list;} fillSelect (selectList [I], temp_data); // Add change event selectList [I]. addEventListener ("change", function (event) {var value1_event.tar get. value; var v_p = value. split (". "); var v_length = v_p.length; // if it is the last select, it will jump out of if (v_length> = selectList. length) return; // construct a new selector var newSelectList = []; for (var j = v_length; j <selectList. length; j ++) newSelectList. push (selectList [j]); // alert (newSelectList. length); // construct new data var newData = data; for (var j = 0; j <v_p.length; j ++) {newData = newData [parseInt (v_p [j])-1]. list;} console. log (newSelectList); console. log (newData); cascade (newSelectList, newData) ;}}// update selectfunction fillSelect (select, list) {select. innerHTML = ""; list. forEach (function (data) {var option = new Option (data. text, data. value); select. add (option );});}
[Code implementation]
<! DOCTYPE html>
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.