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 小提琴演示。

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 小提琴演示。

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

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

JS 小提琴演示。

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

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

console.log(arr);

JS 小提琴演示。

此外，如果您想同时获取 s 中的 thevalue 和text-content option（作为一个简单的演示，使用上面的第二个代码示例作为基础）：

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 小提琴演示。

参考：

• '普通' JavaScript：
  • Array.prototype.map().
  • Array.push().
  • document.getElementById().
  • document.querySelectorAll().
  • Function.prototype.call().
• jQuery：
  • map()（jQuery）。
  • get().

Answer 2

那是因为当你这样做时，$options[i]你没有得到一个 jquery 对象，你得到了一个元素。使用value：

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

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

如果你想要一个 jquery 对象，你可以.eq()改用......像这样：

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

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

无论哪种方式都可以正常工作，尽管第二种方式会创建一个在这种情况下不需要的 jquery 对象。
http://jsfiddle.net/pnkpF/
http://jsfiddle.net/pnkpF/1/

Answer 3

val不是option标签的正确属性。改用value：

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

此外，如果您从 jQuery 数组中选择 [i]，您将获得原始 HTML 元素。再次将其包装在 jQuery 中以访问 .val() 之类的函数：

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

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

Answer 4

选项 1：数组

var options = [];

$("#mySelect option").each(function() {
  options.push($(this).val());
});

options看起来像这样：

['0', '0', '0', '0']

选项 2：对象

如果您想将 保存text在<option>（例如option 2或option 3）中，那么您可能应该将其存储在 Javascript 对象而不是数组中。看看这个：

var options = {};

$("#mySelect option").each(function() {
  options[$(this).html()] = $(this).val();
});

options看起来像这样：

{
  ' option 2 ': '0',
  ' option 3 ': '0',
  ' option 4 ': '0',
  ' option 5 ': '0'
}