Home > front end > JQ realize three-level drop-down linkage
JQ realize three-level drop-down linkage
Time:10-20
HTML code section:
JS code section <script> The function funpro () { Var select=document. GetElementById (" province "); For (var I=0; iIf (select the options [I]. Selected) { Var det_id=select [I] value; //ajax background to obtain the secondary menu data $. Ajax ({ Type: "post", Url:/get_floor "/" + det_id,//$. Trim (td0), Data: {csrfmiddlewaretoken: '{{csrf_token}}}, DataType: 'json, Success: the function (data) { $(" # floor "). Attr (" disabled ", false); $. Each (data, function (index, obj) { Var $HTML=""; $HTML +="& lt; The option value='" + obj + "' & gt;" + obj + "& lt;/option> "; $(" # floor "). Append ($HTML); }); } }); } } The function getfloor () { //ajax background to obtain three drop-down menu data Var select=document. GetElementById (" floor "); Var pro=document. GetElementById (" province "); For (var I=0; iIf (pro) options [I]. Selected) { Var pro_name=pro [I] value;//secondary drop-down menu name Alert (pro_name); } For (var I=0; iIf (select the options [I]. Selected) { Var floor_name=select [I] value;//secondary drop-down menu name Alert (floor_name); $. Ajax ({ Type: "post", Url:/get_area "/" + pro_name + + floor_name '/',//$. Trim (td0), Data: {csrfmiddlewaretoken: '{{csrf_token}}}, DataType: 'json, Success: the function (data) { $(" # area "). Attr (" disabled ", false); $. Each (data, function (index, obj) { Var $HTML=""; $HTML +="& lt; The option value='" + obj + "' & gt;" + obj + "& lt;/option> "; $(" # area "). Append ($HTML); }); } }); } } </script>
Thought is an important level menu background directly to select level menu after call funpro ajax the background () function to get the data for the secondary menu after secondary menu select call getfloor ajax the background () function to get the data to the submenus