從javascript中的html選項標簽獲取所有名稱值

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並推入數組內部。

 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); }; 

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

ES6解決方案：

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

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

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

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

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

但是，如果必須提供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);

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

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

Answer 3

你近了

document.getElementsByTagName('option')返回<option>元素的數組。

您不能在元素數組上獲得.value您只能在單個<option>元素上調用它。

您將如何獲得數組中每個元素的.value ？