Как можно сделать javascript таким образом, чтобы вместо выпадающего меню были кнопки для каждого значения? - PullRequest
Новая
       6

Как можно сделать javascript таким образом, чтобы вместо выпадающего меню были кнопки для каждого значения?

0 голосов
/ 20 июля 2009

Я хотел бы помочь в манипулировании следующим 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» вместо того, чтобы быть в выпадающем меню, были кнопками. Так что, когда он кликает, он вызывает их указанный массив.

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 20 июля 2009

Если я правильно понимаю ваш вопрос, это должно сработать. 

<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>
0 голосов
/ 20 июля 2009

Вы можете просто создать две кнопки и вызвать функцию updateTarget() в событии onClick кнопок: 

<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
   ...
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...