views:

97

answers:

2

I would like help to manipulate to following javascript code so that there are buttons instead of the first drop-down-menu have buttons to choose the values of the next set of values for the drop-down-menus.

The code is:

<html>
<head><title>JS example</title></head>
<body>
<script type="text/javascript"><!--

  //
  var opt_one = new Array('blue', 'green', 'red');
  var opt_two = new Array('plaid', 'paisley', 'stripes');

  //
  function updateTarget() {
    var f = document.myform;
    var which_r = null;
    if (f) {

      // first option selected? ("One")
      if (f.trigger.value == '1') {
        which_r = opt_one;

      // ...or, second option selected? ("Two")
      } else if (f.trigger.value == '2') {
        which_r = opt_two;

      // no known option, hide the secondary popup
      } else {
        f.target.style.display = 'none';
      }

      // did we find secondary options for the selection?
      if (which_r) {

        // reset/clear the target pop-up
        f.target.innerHTML = '';

        // add each option
        for (var opt in which_r) {
          f.target.innerHTML += '<option>' + which_r[opt] + '</option>';
        }

        // display the secondary pop-up
        f.target.style.display = 'inline';
      }
    }
  } // updateTarget()

//-->
</script>
<form name="myform" action="#">
  <select name="trigger" onchange="updateTarget();">
    <option>Select one...</option>
    <option>-</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <select name="target" style="display:none;">
  </select>
</form>
</body>
</html>

So what I am trying to do is make it that the words 'ONE' and 'TWO' instead of being in a drop-down-menu, be buttons. So that when it is cliked it brings up their specified array.

Thank you in advance!

A: 

You could simply create two buttons and invoke the updateTarget() function in the onClick event of the buttons :

<input type="button" value="Option 1" onclick="updateTarget(1);" />
<input type="button" value="Option 2" onclick="updateTarget(2);" />

Note that the signature of the updateTarget() must change to allow you to pass the parameter so that your code can branch accordingly:

function updateTarget(optionNumber)
{
  if (optionNumber == 1)
   ...
  else if (optionNumber == 2)
   ...
  else
   ...
}
Cerebrus
A: 

If I understand your question correctly this should work.

<html>
<head><title>JS example</title></head>
<body>
<script type="text/javascript"><!--

  //
  var opt_one = new Array('blue', 'green', 'red');
  var opt_two = new Array('plaid', 'paisley', 'stripes');

  //
  function updateTarget(button) {
    var f = document.myform;
    var which_r = null;
    if (f) {

      // first option selected? ("One")
       if (button.name == 'one') {
        which_r = opt_one;

      // ...or, second option selected? ("Two")
      } else if (button.name == 'two') {
        which_r = opt_two;

      // no known option, hide the secondary popup
      } else {
        f.target.style.display = 'none';
      }

      // did we find secondary options for the selection?
      if (which_r) {

        // reset/clear the target pop-up
        f.target.innerHTML = '';

        // add each option
        for (var opt in which_r) {
          f.target.innerHTML += '<option>' + which_r[opt] + '</option>';
        }

        // display the secondary pop-up
        f.target.style.display = 'inline';
      }
    }
  } // updateTarget()

//-->
</script>
<form name="myform" action="#">
  <input name="one" type="button" onclick="updateTarget(this)" value="One"/>  <input name="two" type="button" onclick="updateTarget(this)" value="Two"/>
  <select name="target" style="display:none;">
  </select>
</form>
</body>
</html>
Kane Wallmann
Thanks!!! Thats It! You have help the problem that made me not sleep! Now I can sleep tonight!Thank you!
ron8