Question

我有以下html代码

<select>
  <option>Joe</option>
  <option>Buckey</option>
  <option>Elen</option>
  <option>Rimzy</option>
</select>
<button>Submit</button>

我想要的是，当我点击提交按钮时，它应该将选项标签内的所有名称值存储到数组中。到目前为止，我尝试了以下js代码，但它似乎无法正常工作。

document.getElementsByTagName('button').onclick = function() {
  var array = [document.getElementsByTagName('option').value];
  console.log(array);
};

任何想法我怎样才能做到这一点？提前谢谢。

ps：我对javascript很新。

Answer 1

这是解决方案。你必须遍历所有option个元素，抓住每个元素的value并推入一个数组。

＆＃13;

function getValues() {
  var array = document.getElementsByTagName('option');
  var arr = [];
  for (var i = 0; i < array.length; i++) {
    arr.push(array[i].value)
  }
  console.log(arr);
};

＆＃13;

<select id="options">
  <option>Joe</option>
  <option>Buckey</option>
  <option>Elen</option>
  <option>Rimzy</option>
</select>
<button id="submit" onclick="getValues()">Submit</button>

＆＃13;

ES6解决方案：

＆＃13;

function getValues() {
  var array = document.getElementsByTagName('option');
  var arr = [];
  Array.from(array).forEach(v => arr.push(v.value));
  console.log(arr);
};

＆＃13;

<select id="options">
  <option>Joe</option>
  <option>Buckey</option>
  <option>Elen</option>
  <option>Rimzy</option>
</select>
<button id="submit" onclick="getValues()">Submit</button>

＆＃13;

Answer 2

假设ES6是您的选项，那么以下内容将按您的意愿执行：

// using a named function:
function grabTextFrom() {

  // initialising the local variable using 'let',
  // converting the argument supplied to Array.from()
  // to convert the Array-like Object (in this case
  // a NodeList, or HTMLCollection, from
  // document.querySelectorAll()) into an Array:
  let texts = Array.from(
    document.querySelectorAll(

      // 'this' is passed automatically from the
      // later use of EventTarget.addEventListener(),
      // and the dataset.textFrom property value is
      // the value stored in the data-textfrom attribute:
      this.dataset.textfrom
    )

  // iterating over that Array of elements using
  // Array.prototype.map() along with an arrow function:
  ).map(

    // 'opt' is a reference to the current Array-element
    // from the Array of elements over which we're iterating;
    // and here we return the value property-value of that
    // current element:
    opt => opt.value
  );

  // logging to the console for demo purposes:
  console.log(texts);

  // returning to the calling context:
  return texts;
}

// finding the first element which matches the
// supplied CSS selector, and adding the
// grabTextFrom() function as the event-handler
// for the 'click' event (note the deliberate
// lack of parentheses in the function-name):
document.querySelector('#submit').addEventListener('click', grabTextFrom);

＆＃13;

function grabTextFrom() {
  let texts = Array.from(
    document.querySelectorAll(this.dataset.textfrom)
  ).map(
    opt => opt.value
  );
  console.log(texts);
  return texts;
}

document.querySelector('#submit').addEventListener('click', grabTextFrom);

＆＃13;

<select id="options">
  <option>Joe</option>
  <option>Buckey</option>
  <option>Elen</option>
  <option>Rimzy</option>
</select>
<button id="submit" data-textfrom="option">Submit</button>

＆＃13;

但是，如果您必须提供ES5兼容性，则以下内容的工作方式相同：

function grabTextFrom() {

  // here we use Array.prototype.slice(), along
  // with Function.prototype.call(), to apply
  // the slice() method to the supplied NodeList:
  var texts = Array.prototype.slice.call(
    document.querySelectorAll(this.dataset.textfrom)

  // here we use the anonymous function of the
  // Array.prototype.map() method to perform the
  // same function as above, returning the
  // opt.value property-value to the created Array:
  ).map(function(opt) {
    return opt.value;
  });
  console.log(texts);
  return texts;
}

document.querySelector('#submit').addEventListener('click', grabTextFrom);

＆＃13;

function grabTextFrom() {
  var texts = Array.prototype.slice.call(
    document.querySelectorAll(this.dataset.textfrom)
  ).map(function(opt) {
    return opt.value;
  });
  console.log(texts);
  return texts;
}

document.querySelector('#submit').addEventListener('click', grabTextFrom);

＆＃13;

<select id="options">
  <option>Joe</option>
  <option>Buckey</option>
  <option>Elen</option>
  <option>Rimzy</option>
</select>
<button id="submit" data-textfrom="option">Submit</button>

＆＃13;

Answer 3

你很亲密。

document.getElementsByTagName('option')会返回<option>元素数组。

您无法在一系列元素上获得.value - 您只能在单个<option>元素上调用它。

如何为数组中的每个元素获得.value？

从javascript中的html选项标记中获取所有名称值

3 个答案: