如何能够使用javascript，使每个值都有按钮而不是下拉菜单？_Javascript_Button_Drop Down Menu

如何能够使用javascript，使每个值都有按钮而不是下拉菜单？

javascript button drop-down-menu

如何能够使用javascript，使每个值都有按钮而不是下拉菜单？,javascript,button,drop-down-menu,Javascript,Button,Drop Down Menu,我想帮助操作下面的javascript代码，以便有按钮而不是第一个下拉菜单，有按钮为下拉菜单选择下一组值的值代码是： <html> <head><title>JS example</title></head> <body> <script type="text/javascript"><!-- // var opt_one = new Array('blue', 'green', 'red');

我想帮助操作下面的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>

所以我想做的是，让“一”和“二”这两个词成为按钮，而不是在下拉菜单中。因此，当它被剪辑时，它会显示它们指定的数组

提前谢谢你

您只需创建两个按钮并在按钮的onClick事件中调用updateTarget函数：

<input type="button" value="Option 1" onclick="updateTarget(1);" />
<input type="button" value="Option 2" onclick="updateTarget(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>

谢谢就这样！你帮我解决了让我无法入睡的问题！现在我今晚可以睡觉了！非常感谢。

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