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
  • Related