Question

I’m newbie in programming javascript. Can someone show me how to make like this?

<select name="select" id="select">
  <option value="a">a</option>
  <option value="b">b</option>
</select>

When I select “a” the “A” button will appear, then when I select “b” the “B” button will appear.

<input type="submit" name="button" id="button" value="A">

Answer 1

Change your id’s of buttons-to A,B,C etc. Now onClick event of option tag call the below function with id as argument .

For eg.

<select name="select" id="select">
<option value="a" onclick="ShowOrHide('a')">a</option>
<option value="b" onclick="ShowOrHide('b')">b</option>
 </select>

The Script will be like this:

<script type="text/javascript">
<!--
function ShowOrHide(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
//-->
</script>

edit:

If the situation is as said in the comment, you can just split the functions as Show(id) and Hide(id) and then write a third function, which will call Hide() for all other id’s and Show for argument id. You can also use getElementsByName() if you are setting all buttons with same name, you can use a loop and do it.