javascript - 选择 javascript 数组

Question

我想将所有选项保存为 javaScript 数组

HTML

 <select id="mySelect">
  <option value="0"> option 2 </option>
  <option value="0"> option 3 </option>
  <option value="0"> option 4 </option>
  <option value="0"> option 5 </option>
 </select>

JS

 $select = $("#mySelect");
 $options = $select.find("option");

 for(var i = 0; i < $options.length; i++ ) {
  alert($options[i].val()); 
}

alert($options[i].val()); 不起作用，我得到 $options[i].val() is not a function

Answer 1

如果您使用的是 jQuery:

var arr = $('#mySelect option').map(function(){
              return this.value;
          }).get();

JS Fiddle demo .

options[i].val() 失败的原因是 options[i] 是原生 DOM 节点，而不是 jQuery 对象。

如果您想使用纯 JavaScript 执行相同操作:

var opts = document.getElementById('mySelect').getElementsByTagName('option'),
    arr = [];
for (var i = 0, len = opts.length; i < len; i++) {
    arr.push(opts[i].value);
}

JS Fiddle demo .

或者，对于更新的浏览器:

var opts = document.querySelectorAll('#mySelect option'),
    arr = [];
for (var i = 0, len = opts.length; i < len; i++) {
    arr.push(opts[i].value);
}

JS Fiddle demo .

在稍微更现代的浏览器中:

var arr = [].map.call(document.querySelectorAll('#mySelect option'), function(a){
    return a.value;
});

console.log(arr);

JS Fiddle demo .

此外，如果您想从选项中获取值和文本内容(作为一个简单的演示，使用上面的第二个代码示例作为基础):

var opts = document.getElementById('mySelect').getElementsByTagName('option'),
    arr = [], tmp;
for (var i = 0, len = opts.length; i < len; i++) {
    tmp = opts[i];
    arr.push({'value' : tmp.value, 'content' : (tmp.textContent || tmp.innerText)})
}

console.log(arr);

JS Fiddle demo .

引用文献:

• “普通”JavaScript:
  • Array.prototype.map() .
  • Array.push() .
  • document.getElementById() .
  • document.querySelectorAll() .
  • Function.prototype.call() .
• jQuery:
  • map() (jQuery) .
  • get() .