List items and javascript

smartic

i'm having three lists when i select from any one the others be visible by hierarchy but it takes to long to write my code is there is another away to write this code like XML that is my javascript code ex:

Expand|Select|Wrap|Line Numbers

 function ChangeCategory(ForWhat){

    switch(ForWhat.selectedIndex){

        case 0:

        //if he selected noothing

        document.getElementById("Type").innerHTML="";

        document.getElementById("CType").innerHTML="";

        document.getElementById("subCategory").innerHTML="";

        document.getElementById("CsubCategory").innerHTML="";

        break;

        case 1:

        //if he selected Computers & Networking

        document.getElementById("Type").innerHTML="<span class=\"red\">*</span> Type";

        document.getElementById("CType").innerHTML="<select name=\"select\" id=\"select\" onchange=\"ChangeComputers(this)\"><option>- Choose -</option><option>Apple, Macintosh Computers</option> <option>Desktop PCs</option><option>Desktop &amp; Laptop Components</option><option>Desktop &amp; Laptop Accessories</option><option>Laptops, Notebooks</option><option>Drives, Controllers &amp; Storage</option><option>Networking</option><option>Printers</option><option>Monitors &amp; Projectors</option><option>Software</option><option>Printer Supplies &amp; Accessories</option><option>Scanners</option><option>Servers</option><option>Technology Books</option></select>";

        document.getElementById("subCategory").innerHTML="";

        document.getElementById("CsubCategory").innerHTML="";

        break;

        case 2:

        //if he selected Cell Phone and PDA

        document.getElementById("Type").innerHTML="<span class=\"red\">*</span> Type";

        document.getElementById("CType").innerHTML="<select name=\"subList\" id=\"subList\" onchange=\"ChangeCellPhones(this)\"><option>- Choose -</option><option>Accessories, Parts</option><option>Bluetooth Wireless Accessories</option><option>Cell Phones</option><option>Smartphones</option><option>PDAs & Pocket PCs</option><option>Phone & SIM Cards</option><option>Wholesale & Large Lots</option></select>";

        document.getElementById("subCategory").innerHTML="";

        document.getElementById("CsubCategory").innerHTML="";

        break;

    }

}

//if he selected Computers & Networking

function ChangeComputers(ForWhat){

    switch(ForWhat.selectedIndex){

        case 0:

        document.getElementById("subCategory").innerHTML="";

        document.getElementById("CsubCategory").innerHTML="";

        break;

        case 1:

        document.getElementById("subCategory").innerHTML="<span class=\"red\">*</span> Sub Categorie";

        document.getElementById("CsubCategory").innerHTML="<select name=\"subList\" id=\"subList\"><option>Apple Components</option><option>Apple Desktops</option><option>Apple Drives, Media</option><option>Apple Input Devices</option><option>Apple Laptops, Notebooks</option><option>Apple Monitors/Displays</option><option>Apple Networking</option><option>Apple Parts & Accessories</option><option>Printers, Scanners & Ink</option><option>Vintage Apple/Macintosh</option><option>Other Apple Products</option></select>";

        case 2:

        document.getElementById("subCategory").innerHTML="<span class=\"red\">*</span> Sub Categorie";

        document.getElementById("CsubCategory").innerHTML="<select name=\"subList\" id=\"subList\"><option>Desktop PCs</option><option>Acer</option><option>Alienware</option><option>Asus</option><option>Dell</option><option>Gateway</option><option>HP</option><option>Compaq</option><option>IBM</option><option> Lenovo</option><option>Sony</option><option>Whitebox</option><option> Custom Systems</option><option>Other Brands</option></select>";

        break;

        case 3:

        document.getElementById("subCategory").innerHTML="<span class=\"red\">*</span> Sub Categorie";

        document.getElementById("CsubCategory").innerHTML="<select name=\"subList\" id=\"subList\"><option>CPUs for Desktop PC</option><option>CPUs for Laptops</option><option>Fans</option><option> Heatsinks</option><option> Cooling</option><option>Memory for Desktop PC</option><option>Memory for Laptops</option><option>Modems for Desktop PC</option><option>Motherboards for Desktop PC</option><option>Motherboards for Laptops</option><option>Screens</option><option> LCD Panel for Laptops</option><option>Sound Cards for Desktop PC</option><option>Sound Cards for Laptops</option><option>TV Tuner/Video Capture Devices</option><option>Uninterruptible Power Supply</option><option>Video Cards for Desktop PC</option><option>Other Components</option></select>";

        break;

        case 4:

        document.getElementById("subCategory").innerHTML="<span class=\"red\">*</span> Sub Categorie";

        document.getElementById("CsubCategory").innerHTML="<select name=\"subList\" id=\"subList\"><option>Adapters Chargers for Laptops</option><option>Barcode Scanners</option><option>Batteries for Laptops</option><option>Cables</option><option>Connectors for Laptops</option><option>Cables</option><option>Adapter Cards</option><option>Card Readers</option><option>Cases</option><option>Bags for Laptops</option><option>Docking Stations for Laptops</option><option>Gamepads</option><option>Joypads</option><option>Hubs</option><option>Infrared IrDA</option><option>Joysticks</option><option>Keyboards</option><option>Laptop Memory Card Readers</option><option>LED Lites</option><option>Mice</option><option>Mouse</option><option>Microphones</option><option>Mounts</option><option>Auto Mounts</option><option>PC Case</option><option>Tower for Desktop PC</option><option>PCMCIA Cards for Laptops</option><option>PC Remote Controls</option><option>Power Supplies for Desktop PC</option><option>Repair</option><option>Service Manuals</option><option>Speakers & Headphones</option><option>Security for Laptops</option><option>Tablets</option><option>Trackballs</option><option>Video & Multimedia Accessories</option><option>Video Conferencing</option><option>Webcams</option></select>";

        case 5:

        document.getElementById("subCategory").innerHTML="<span class=\"red\">*</span> Sub Categorie";

        document.getElementById("CsubCategory").innerHTML="<select name=\"subList\" id=\"subList\"><option>Acer</option><option>Alienware</option><option>AST</option><option>Asus</option><option>Averatec</option><option>Dell</option><option>Fujitsu</option><option>Gateway</option><option>HP</option><option>Compaq</option><option>IBM</option><option>Lenovo</option><option>NEC</option><option>Panasonic</option><option>Sharp</option><option>Sony</option><option>Toshiba</option><option>Other Brands</option><option>Custom Systems</option><option>Whitebook</option><option>Tablet PCs</option></select>";

        break;

        case 6:

        document.getElementById("subCategory").innerHTML="<span class=\"red\">*</span> Sub Categorie";

        document.getElementById("CsubCategory").innerHTML="<select name=\"subList\" id=\"subList\"><option>Blank Media</option><option>Card Reader/Writers</option><option>CD Drives</option><option>CD Duplicators</option><option>Controllers-Adapter I/O Card</option><option>Drives for Laptops</option><option>DVD ROM Drives</option><option>DVD-RW/+RW Drives, Burners</option><option>Enclosures</option><option>Hard Drives - External,Zip,Jaz</option><option>Hard Drives - Internal</option><option>Flash Memory Drives</option><option>Floppy Drives</option><option>Tape Drives</option><option>Other Drives & Controllers</option></select>";

        break;

        case 7:

        document.getElementById("subCategory").innerHTML="<span class=\"red\">*</span> Sub Categorie";

        document.getElementById("CsubCategory").innerHTML="<select name=\"subList\" id=\"subList\"><option>Cables, Connectors</option><option>Home Networking, Cable & DSL</option><option>Filers, Load Balancers</option><option>Hubs</option><option>KVM Switch Boxes, Cables</option><option>Mainframe, DEC, VAX, AS/400</option><option>Networking, Telecom Tools</option><option>Network Interface Cards, NICs</option><option>Print Servers, Wired</option><option>Racks, Mounts & Patch Panels</option><option>Router Components, Memory</option><option>Routers, Wired</option><option>Security, Firewall, VPN</option><option>Server Components, Memory</option><option>Software, Operating Systems</option><option>Storage Equipment, NAS, SAN</option><option>Switch Components, Memory</option><option>Switches</option><option>Telephone Systems, Telecom</option><option>UPS, Power Protection, APC</option><option>Workstation Components, Memory</option><option>Workstations, Terminals</option><option>Wireless Networking, WiFi</option><option>Other Networking Equipment</option></select>";

        break;

        case 8:

        document.getElementById("subCategory").innerHTML="<span class=\"red\">*</span> Sub Categorie";

        document.getElementById("CsubCategory").innerHTML="<select name=\"subList\" id=\"subList\"><option>All-In-One, Multifunction</option><option>Ink Jet & Photo Printers</option><option>Laser Printers</option><option>Mobile Printers</option><option>POS, Dot Matrix Printers</option><option>Thermal Printers</option><option>Other Printers</option></select>";

        break;

    }

}

that is the HTML:

[HTML]<select name="Category" id="Category" onchange="ChangeCategory(this)">
<option>- Choose -</option>
<option>Computer and Networking</option>
<option>Cell Phone and PDA</option>
<option>Camera</option>
<option>Electronic</option>
<option>Real Estate</option>
<option>Video Game</option>
</select>
<div id="Type"></div>
<div id="CType"></div>
<div id="subCategory"></div>
<div id="CsubCategory"></div>[/HTML]

iam_clint

I refer you to this link
http://www.quirksmode.org/js/options.html

acoder

Instead of using innerHTML, put the code for the select elements within the divs and just hide them. Then depending on the selection, display the required dropdown. You can hide and display by setting the style.display property to "none" and "block" respectively.

List items and javascript

re: List items and javascript

re: List items and javascript

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about