dependent drop down menus

[khr2003]

hello

I found a js that allows to use dependent drop down menus, and here it is

<script language="JavaScript">
function ShowReg(op) {
  document.getElementById('Car').style.display='none';
  document.getElementById('Boat').style.display='none';
  document.getElementById('Plane').style.display='none';

  if (op == '1') {
    document.getElementById('Car').style.display="block";
  }
  if (op == 2) {
    document.getElementById('Boat').style.display="block";
  }
  if (op == 3) {
    document.getElementById('Plane').style.display="block";
  }
}

</script>

<select id="choice" onChange="ShowReg(this.selectedIndex)" size="4">
  <option value='0'>Select registration type
  <option value="1">Car
  <option value="2">Boat
  <option value="3">Plane
</select>
<br>
<div id="Car" style="display:none">
  VIN No. <input type="text" id="VIN" value="">
</div>
<div id="Boat" style="display:none">
  Registration No. <input type="text" id="Breg" value="">
</div>
<div id="Plane" style="display:none">
  Tail No. <input type="text" id="Ptail" value="">
  Model <input type="text" id="Pmodel" value="">
</div>

The problem is that when i change the value of op to a letter (say r) the option stops working (of course I change the option value to r as well).

what am I doing wrong?

[~s.o.s~]

Because selectedIndex can't be a alphabet; it has to be numeric; more specifically long.

It would be better if you just passed in `this' and got the value selected using:

function showSomething(elem) {
  var val = elem.options[elem.selectedIndex].value;
  // process the value
}

// in your markup
<select id="choice" onchange="showReg(this);" size="4">

Make sure the intrinsic event handlers are in all lowercase as mentioned in the specification i.e. onchange instead of onChange . Also make it a practice to assign a `name' to all form elements because AFAIK values of elements without a name aren't submitted.