Hello All,

I am struggling to work out how I can create a drop-down menu, that when a specific option is selected, another drop-down menu appears.

I have coded some html below;

Code HTML4Strict:
<form>
<div>
  <label for="customer">Select the Customer: </label>
    <select name="customer">
      <option>Customer 1</option>
      <option>Customer 2</option>
    </select>
</div>
<div>
  <label for="customer1">Select a server:</label>
    <select name-"customer1">
      <option>Customer 1's Server01</option>
      <option>Customer 1's Server02</option>
      <option>Customer 1's Server03</option>
    </select>
</div>
<div>
  <label for="customer2">Select a server:</label>
    <select name-"customer2">
      <option>Customer 2's Server01</option>
      <option>Customer 2's Server02</option>
    </select>
</div>
</form>

First of all I would like the 2nd and 3rd divs (the drop-down menus that contain each customer server) to be hidden. Then when for example, Customer 1 is select from the 1st drop-down menu ONLY the Customer 1 (2nd div) drop-down menu will then appear.

I have looked at the reply on "multiple drop-down menus" post by pmw57 and triend to ammend the code...but it's not quite what I am looking for.

Could anyone please help me out with some JS as it is not yet my strong point :-P any help would be most appreciated.

Regards,
Bernie