使用javascript怎么可能，而不是使用下拉菜单，而是使用每个值的按钮？

Question

我想要帮助操作以下javascript代码，以便有按钮而不是第一个下拉菜单具有按钮来选择下拉菜单的下一组值的值。

代码是：

<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>

因此，我想做的是使按钮“ ONE”和“ TWO”（而不是出现在下拉菜单中）成为按钮。 这样，当它被点赞时，便会显示其指定的数组。

先感谢您！

Answer 1

您可以简单地创建两个按钮并在按钮的onClick事件中调用updateTarget()函数：

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

请注意，必须更改updateTarget()的签名以允许您传递参数，以便您的代码可以相应地分支：

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

Answer 2

如果我正确理解了您的问题，这应该可以解决。

<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>

使用javascript怎么可能，而不是使用下拉菜单，而是使用每个值的按钮？

问题描述

2 个解决方案

解决方案1
0 2009-07-20 13:04:10

解决方案2
0 已采纳 2009-07-20 13:08:20

使用javascript怎么可能，而不是使用下拉菜单，而是使用每个值的按钮？

问题描述

2 个解决方案

解决方案1 0 2009-07-20 13:04:10

解决方案2 0 已采纳 2009-07-20 13:08:20

解决方案1
0 2009-07-20 13:04:10

解决方案2
0 已采纳 2009-07-20 13:08:20