Show the content using dropdown options

[Sofi02]

<td>Rooms :</td><td>
<select name="Room1">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  </select></td>

When i select room 1 from the above drop down then the below field i.e details 4 room 1 should get display...

<tr><td><font color="Red">*</font>Rooms Type :</td><td>
<select name="Roomtype1">
  <option>Double</option>
  <option>Twin</option>
  <option>Double plus 1 child</option>
  <option>Twin plus 1 child</option>
<option>Twin for sole use</option>
<option>Single</option>
<option>Triple</option>
<option>Quadruple</option>
</select></td>
<td> Adults :</td><td>
<select name="Adults1">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
<td>Children :</td><td>
<select name="Child1">
<option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td></tr>

and when i select 2 then details of room1 and room2 shld display...

<select name="Roomtype2">
  <option>Double</option>
  <option>Twin</option>
  <option>Double plus 1 child</option>
  <option>Twin plus 1 child</option>
<option>Twin for sole use</option>
<option>Single</option>
<option>Triple</option>
<option>Quadruple</option>
</select></td>
<td> Adults :</td><td>
<select name="Adults2">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
<td>Children :</td><td>
<select name="Child2">
<option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td></tr>

And similar when i select 3....


please reply ASAP
Thanks in advance....

[acoder]

The simplest way to do this is to have the dropdowns hidden initially (except perhaps the ones for room 1).

Then show the others using the onchange event, e.g.

<select name="Room1" onchange="call_function_here()">

Note that this is inline, but it would be better to move this out of the HTML.

To get the current selected value, you can simply get the value property, e.g.

document.getElementById('Room1').value;

assuming you add an ID of "Room1".

To show/hide objects, set the display property to "block"/"none" respectively.

A better method, though, is to add the options dynamically depending on the selection.

[Sofi02]

thank u ....
Can help me in updating in acess???
and retrieving same value depending on number of room select....

[acoder]

Do you mean Microsoft Access?

I've already shown how you can get the selected value. I should add that you will need to add the value property for the options for some browsers:

<option value="1">1</option>

There are other alternatives to get the selected value, but this is the simplest.