Question

我希望第一个div中的所选项目显示在另一个div中的textarea中。我写了一些代码，但它不起作用。请帮帮我。

＆＃13;

<div class="container">
  <div class="row">
    <form action="#" method="post" id="demoForm" class="demoForm">
      <fieldset>
        <legend>Demo: Get Selected Options</legend>

        <p>
          <select name="demoSel[]" id="demoSel" size="4" multiple>
                        <option value="scroll">Scrolling Divs JavaScript</option>
                        <option value="tooltip">JavaScript Tooltips</option>
                        <option value="con_scroll">Continuous Scroller</option>
                        <option value="banner">Rotating Banner JavaScript</option>
                        <option value="random_img">Random Image PHP</option>
                        <option value="form_builder">PHP Form Generator</option>
                        <option value="table_class">PHP Table Class</option>
                        <option value="order_forms">PHP Order Forms</option>
                    </select>
          <input type="submit" value="Submit" />
          <textarea name="display" id="display" placeholder="view select list value(s) onchange" cols="20" rows="4" readonly></textarea>
        </p>

      </fieldset>
    </form>
  </div>
</div>

＆＃13;

this._authService.getRoles()

＆＃13;

Answer 1

你没有用分号关闭你的2个最上面的函数;就我所知，这些似乎是唯一的错误。你的代码运行正常。我注释掉警报以显示工作代码（警报有效，但我发现它们有些烦人，如果你愿意，你可以再次评论它们。）

运行代码段以查看..

function getSelectedOptions(sel, fn) {
 // alert("hjgh");
  var opts = [],
    opt;

  // loop through options in select list
  for (var i = 0, len = sel.options.length; i < len; i++) {
    opt = sel.options[i];

    // check if selected
    if (opt.selected) {
      // add to array of option elements to return from this function
      opts.push(opt);

      // invoke optional callback function if provided
      if (fn) {
        fn(opt);
      }
    }
  }

  // return array containing references to selected option elements
  return opts;
};

function callback(opt) {
 //alert("tfh");
  // display in textarea for this example
  var display = document.getElementById('display');
  display.innerHTML += opt.value + ', ';

  // can access properties of opt, such as...
  //alert( opt.value )
  //alert( opt.text )
  //alert( opt.form )
};


// anonymous function onchange for select list with id demoSel
document.getElementById('demoSel').onchange = function(e) {
 //alert("ghghg");
  // get reference to display textarea
  var display = document.getElementById('display');
  display.innerHTML = ''; // reset

  // callback fn handles selected options
  getSelectedOptions(this, callback);

  // remove ', ' at end of string
  var str = display.innerHTML.slice(0, -2);
  display.innerHTML = str;
};

document.getElementById('demoForm').onsubmit = function(e) {
  //alert('hhj');
  // reference to select list using this keyword and form elements collection
  // no callback function used this time
  var opts = getSelectedOptions(this.elements['demoSel[]']);

  alert('The number of options selected is: ' + opts.length); //  number of selected options

  return false; // don't return online form
};

<body>
  <div class="container">
    <div class="row">
      <form action="#" method="post" id="demoForm" class="demoForm">
        <fieldset>
          <legend>Demo: Get Selected Options</legend>

          <p>
            <select name="demoSel[]" id="demoSel" size="4" multiple>
                    <option value="scroll">Scrolling Divs JavaScript</option>
                    <option value="tooltip">JavaScript Tooltips</option>
                    <option value="con_scroll">Continuous Scroller</option>
                    <option value="banner">Rotating Banner JavaScript</option>
                    <option value="random_img">Random Image PHP</option>
                    <option value="form_builder">PHP Form Generator</option>
                    <option value="table_class">PHP Table Class</option>
                    <option value="order_forms">PHP Order Forms</option>
                </select>
            <input type="submit" value="Submit" />
            <textarea name="display" id="display" placeholder="view select list value(s) onchange" cols="20" rows="4" readonly></textarea>
          </p>

        </fieldset>
      </form>
    </div>
  </div>
</body>

我希望第一个列表中的选择列表值显示在下一个列表中

1 个答案: