Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Cascade menu</title><style type="text/css">Fieldset {font-size: 12px; margin: 5px 0 0 0 ;}</style><script type="text/javascript">Window. onload = function () {var arr = new Array (); for (var I = 0; I <3; I ++) {arr [I] = new Array ();} arr [0] [0] = "apple"; arr [0] [1] = "banana "; arr [0] [2] = "pear"; arr [1] [0] = "cabbage"; arr [1] [1] = "radish "; arr [1] [2] = "tomato"; arr [1] [3] = "potato"; arr [2] [0] = "duck "; arr [2] [1] = "chicken and baby"; arr [2] [2] = "dog"; arr [2] [3] = "pork "; function $ (id) {return document. getElementById (id) ;}$ ("BigClass "). onchange = changes; function changes () {// $ ("BigClass "). selectedIndex = 0; var newValue = $ ("BigClass "). options [$ ("BigClass "). selectedIndex]. value; $ ("changeCheck "). innerHTML = ""; for (var I = 0; I<arr[newValue].length;i++){createCheck("sg",i);var txt=document.createTextNode(arr[newValue][i]);$("changeCheck").appendChild(txt);}}function createCheck(name,value){var checkbox=document.createElement("input");checkbox.setAttribute("type","checkbox");checkbox.setAttribute("value",value);checkbox.setAttribute("name",name);$("changeCheck").appendChild(checkbox);} }</script></head><body><form action=""><fieldset><select id="BigClass"><option value="0">Fruit</option> <option value="1">Vegetables</option> <option value="2">Food supplements</option> </select></fieldset><fieldset id="changeCheck"><input type="checkbox" value="1" name="sg" />Apple<input type="checkbox" value="2" name="sg" />Bananas<input type="checkbox" value="3" name="sg" />Pears</fieldset></form></body></html>
Tip: you can modify some code before running
