select an item from a list box & enable same type in other list box

select an item from a list box & enable same type in other list box

Hi 
at first I am really sorry to put this much code. I am new to javascript. I have multiple list boxes, what I want is, when I select one or more iteams from 1st list box, all the related items in other list box should be enabled. 
please help me. 

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>Quotation</title>
  6. <style type="text/css">
  7. .auto-style1 {
  8. text-align: center;
  9. }
  10. .auto-style3 {
  11. font-size: x-large;
  12. }
  13. .auto-style4 {
  14. text-align: left;
  15. }
  16. .auto-style5 {
  17. font-size: x-small;
  18. }
  19. .auto-style6 {
  20. font-size: small;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div id="body" class="auto-style1" style="position: absolute; width: 1153px; height: 461px; z-index: 1; left: 216px; top: 19px; background-color: #F0F0F0; color: #000000; font-family: Arial, Helvetica, sans-serif">
  26. <label id="Label1"><br /></label>
  27. <br />
  28. <strong><span class="auto-style3">Quotation</span></strong>
  29. <div id="cstype" class="auto-style4" style="position: absolute; width: 1030px; height: 248px; z-index: 3; left: 96px; top: 117px">
  30. <div id="cstypelist" class="auto-style1" style="position: absolute; width: 137px; height: 230px; z-index: 1; left: 15px; top: 11px">
  31. <label id="Label3"><span class="auto-style6"><strong>Type</strong></span><br class="auto-style5">
  32. </label>
  33. <div id="layer7" style="position: absolute; width: 120px; height: 204px; z-index: 1; left: 8px; top: 22px">
  34. <select multiple="multiple" name="cstype" style="width: 106px; height: 199px">
  35. <option value="cscar">CSCar</option>
  36. <option value="csbus">CSBus</option>
  37. <option value="cslorry">CSLorry</option>
  38. <option value="csboat">CSBoat</option>
  39. </select>
  40. </div>
  41. </div>
  42. <div id="csdevice" class="auto-style1" style="position: absolute; width: 200px; height: 230px; z-index: 1; left: 158px; top: 10px">
  43. <span class="auto-style6"><strong>Devices</strong></span><label id="Label4"><br class="auto-style5">
  44. </label>
  45. <div id="csdevicelist" style="position: absolute; width: 192px; height: 201px; z-index: 1; left: 8px; top: 25px">
  46. <select multiple="multiple" name="csdevice" style="width: 191px; height: 199px">
  47. <option value="cscar" disabled>CSCar Red</option>
  48. <option value="cscar" disabled>CSCar Blue</option>
  49. <option value="cscar" disabled>CSCar Green</option>
  50. <option value="csbus " disabled>CSBus Red</option>
  51. <option value="csbus" disabled>CSBus Blue</option>
  52. <option value="csbus" disabled>CSBus Green</option>
  53. <option value="cslorry" disabled>CSLorry Red</option>
  54. <option value="cslorry" disabled>CSLorry Blue</option>
  55. <option value="cslorry" disabled>CSLorry Green</option>
  56. <option value="csboat" disabled>CSBoat Red</option>
  57. <option value="csboat" disabled>CSBoat Blue</option>
  58. <option value="csboat" disabled>CSBoat Green</option>
  59. </select>
  60. </div>
  61. </div>
  62. <div id="csaccessories" class="auto-style1" style="position: absolute; width: 223px; height: 230px; z-index: 1; left: 373px; top: 11px">
  63. <span class="auto-style6"><strong>Accessories</strong></span><label id="Label5"><br class="auto-style5">
  64. </label>
  65. <div id="csaccessorieslist" style="position: absolute; width: 207px; height: 201px; z-index: 1; left: 8px; top: 25px">
  66. <select multiple="multiple" name="csaccessories" style="width: 196px; height: 199px">
  67. <option value="cscar" disabled>CSCar Tyre</option>
  68. <option value="cslorry" disabled>CSLorry Tyre</option>
  69. <option value="cscarfix" disabled>CSCar Verification Fixture</option>
  70. <option value="extrabattery" disabled>Extra Battery</option>
  71. </select>
  72.  </div>
  73. </div>
  74. <div id="cssoftwarepac" class="auto-style1" style="position: absolute; width: 124px; height: 230px; z-index: 1; left: 606px; top: 13px">
  75. <span class="auto-style6"><strong>Software Packages</strong></span><label id="Label6"><br class="auto-style5">
  76. </label>
  77. <div id="cssoftwarepaclist" style="position: absolute; width: 110px; height: 201px; z-index: 1; left: 8px; top: 25px">
  78. <select multiple="multiple" name="softwarepackage" style="width: 104px; height: 199px">
  79. <option>Audit Lite</option>
  80. <option>Audit</option>
  81. <option>Audit Plus Pro</option>
  82. <option>PLS</option>
  83. </select>
  84.  </div>
  85. </div>
  86. <div id="csmaintenancehardware" class="auto-style1" style="position: absolute; width: 234px; height: 230px; z-index: 1; left: 748px; top: 13px">
  87. <span class="auto-style6"><strong>Maintenance Plans (Hardware)</strong></span>
  88. <div id="csmaintenancehardwarelist" style="position: absolute; width: 220px; height: 201px; z-index: 1; left: 6px; top: 25px; right: 8px;">
  89. <strong>
  90. <select multiple="multiple" name="csmaintenancehardware" style="width: 214px; height: 199px">
  91. <option value="cscar" disabled>CSCar Standard Kit</option>
  92. <option value="cscar" disabled>CSCar Bluetooth Kit</option>
  93. <option value="cscar" disabled>CSCar Wi-Fi Kit</option>
  94. <option value="cslorry" disabled>CSLorry Standard Kit</option>
  95. <option value="cslorry" disabled>CSLorry Bluetooth Kit</option>
  96. <option value="cslorry" disabled>CSLorry Wi-Fi Kit</option>
  97. <option value="csboat" disabled>CSBoat Standard Kit</option>
  98. <option value="csboat" disabled>CSBoat Bluetooth Kit</option>
  99. <option value="csboat" disabled>CSBoat Wi-Fi Kit</option>
  100. <option value="expire" >Expired Year Maintenance Plan</option>
  101. </select>
  102.  </strong>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. </body>
  108. </html>