468,484 Members | 1,545 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,484 developers. It's quick & easy.

List items and javascript

150 100+
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
  1. function ChangeCategory(ForWhat){
  2.     switch(ForWhat.selectedIndex){
  3.         case 0:
  4.         //if he selected noothing
  5.         document.getElementById("Type").innerHTML="";
  6.         document.getElementById("CType").innerHTML="";
  7.         document.getElementById("subCategory").innerHTML="";
  8.         document.getElementById("CsubCategory").innerHTML="";
  9.         break;
  10.         case 1:
  11.         //if he selected Computers & Networking
  12.         document.getElementById("Type").innerHTML="<span class=\"red\">*</span> Type";
  13.         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>";
  14.         document.getElementById("subCategory").innerHTML="";
  15.         document.getElementById("CsubCategory").innerHTML="";
  16.         break;
  17.         case 2:
  18.         //if he selected Cell Phone and PDA
  19.         document.getElementById("Type").innerHTML="<span class=\"red\">*</span> Type";
  20.         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>";
  21.         document.getElementById("subCategory").innerHTML="";
  22.         document.getElementById("CsubCategory").innerHTML="";
  23.         break;
  24.     }
  25. }
  26. //if he selected Computers & Networking
  27. function ChangeComputers(ForWhat){
  28.     switch(ForWhat.selectedIndex){
  29.         case 0:
  30.         document.getElementById("subCategory").innerHTML="";
  31.         document.getElementById("CsubCategory").innerHTML="";
  32.         break;
  33.         case 1:
  34.         document.getElementById("subCategory").innerHTML="<span class=\"red\">*</span> Sub Categorie";
  35.         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>";
  36.         case 2:
  37.         document.getElementById("subCategory").innerHTML="<span class=\"red\">*</span> Sub Categorie";
  38.         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>";
  39.         break;
  40.         case 3:
  41.         document.getElementById("subCategory").innerHTML="<span class=\"red\">*</span> Sub Categorie";
  42.         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>";
  43.         break;
  44.         case 4:
  45.         document.getElementById("subCategory").innerHTML="<span class=\"red\">*</span> Sub Categorie";
  46.         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>";
  47.         case 5:
  48.         document.getElementById("subCategory").innerHTML="<span class=\"red\">*</span> Sub Categorie";
  49.         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>";
  50.         break;
  51.         case 6:
  52.         document.getElementById("subCategory").innerHTML="<span class=\"red\">*</span> Sub Categorie";
  53.         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>";
  54.         break;
  55.         case 7:
  56.         document.getElementById("subCategory").innerHTML="<span class=\"red\">*</span> Sub Categorie";
  57.         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>";
  58.         break;
  59.         case 8:
  60.         document.getElementById("subCategory").innerHTML="<span class=\"red\">*</span> Sub Categorie";
  61.         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>";
  62.         break;
  63.     }
  64. }
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]
Oct 2 '07 #1
2 1441
iam_clint
1,208 Expert 1GB
I refer you to this link
http://www.quirksmode.org/js/options.html
Oct 2 '07 #2
acoder
16,027 Expert Mod 8TB
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.
Oct 2 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by R.G. Vervoort | last post: by
4 posts views Thread by Sleepless on the Web | last post: by
3 posts views Thread by Kay | last post: by
3 posts views Thread by Stephen Adam | last post: by
8 posts views Thread by Nathan | last post: by
reply views Thread by theflame83 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.