By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,296 Members | 1,473 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,296 IT Pros & Developers. It's quick & easy.

List items and javascript

100+
P: 150
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
Share this Question
Share on Google+
2 Replies


iam_clint
Expert 100+
P: 1,208
I refer you to this link
http://www.quirksmode.org/js/options.html
Oct 2 '07 #2

acoder
Expert Mod 15k+
P: 16,027
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.