Whats the best way to do this.

Hello,

I have a form and several select menus where i will show just ONE depending on user choice of other select menu on same form.

and the select menus that i want to display are all read from MySql DB...

so lets say i have all the select menu now hided with css display:none

so when the user choose somethin in other select menu i should unhide the corresponding select menu..

so whats the best way to do that?

Thanks in advance

<html><head><title>TEST</title>
<style type="text/css">
.select2
{
  display: none;
}
</style>
<script type="text/javascript">
var currSelect;
function showSelect(select1)
{
  // hide current, if defined
  if(currSelect)
    currSelect.style.display = 'none';
  // get new
  currSelect = document.getElementsByName
          (select1.options[select1.selectedIndex].value)[0];
  // may be undefined..
  if(currSelect) currSelect.style.display = 'inline';
}
</script>
</head>
<body>  <select onchange="showSelect(this)">
   <option value="">_select an option_</option>
   <option value="fish">Fish</option>
   <option value="countries">Countries</option>
  </select>
  <select name="fish"   class="select2">
   <option value="">_select an option_</option>
   <option value="trout">Trout</option>
   <option value="cod">Cod</option>
  </select>
  <select name="countries" class="select2">
   <option value="">_select an option_</option>
   <option value="france">France</option>
   <option value="germany">Germany</option>
  </select></body>
</html>

Whats the best way to do this.

show/hide select menus

smagdy

Bernard Marx

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week