Javascript selecbox.options to array?

bqf10yzr  于 2023-05-27  发布在  Java
关注(0)|答案(8)|浏览(102)

据我所知,HTML中的select元素是一个数组。
所以基本上我想做的是返回一个用逗号分隔的数组字符串。
尝试执行selecbox.options.join(',');,但得到不支持的错误;有人知道为什么吗?

rjee0c15

rjee0c151#

它不是数组。它是一个HTMLCollection。它是“类数组”
在2022年,即Internet Explorer 11停产前一周,最简单的JavaScript解决方案是使用spreadArray map

const opts = document.querySelectorAll("select option"); 
// we can use forEach on the resulting HTMLCollection 
// but map needs to be spread to array
const vals = [...opts]
  .map(el => el.value); 
console.log(vals);
<select>
<option value="Please select">Text 0</option>
<option value="one">Text 1</option>
<option value="two">Text 2</option>
<option value="three">Text 3</option>
</select><br/> 
The above select has the following option values:<br/>
<span id="result"></span>
    • 与IE11兼容的旧答案**

http://api.jquery.com/jQuery.each/,它可以在以下任一项上迭代:
迭代对象和数组。具有length属性的数组和类似数组的对象(例如函数的arguments对象)通过数字索引从0到length-1进行迭代。其他对象通过其命名属性迭代。
每个HTML Option element都有一个值、一个文本和一些其他属性。
可以使用简单的for循环

vals = []
var sel = document.querySelector("select");
for (var i=0, n=sel.options.length;i<n;i++) { // looping over the options
  if (sel.options[i].value) vals.push(sel.options[i].value);
}

typeracer发布的Array.apply将返回一个HTMLOptionElements数组,它仍然需要循环或Map以获取值和文本
这里有几个版本将返回相同的。
This fiddle will run in IE11 too

var vals, sel = document.querySelector("select"), show=function(vals) {$("#result").append("[" + vals.join("][") + "]<hr/>");}
var supportsES6 = function() {try{new Function("(a = 0) => a");return true;}catch (err) {return false;  }}();

// jQuery mapping jQuery objects - note the "this" and the .get()
vals = $('select > option').map(function() {return this.value;}).get();
show(vals);

// plain JS using loop over select options
vals = [];
for (var i = 0, n = sel.options.length; i < n; i++) { // looping over the options
  if (sel.options[i].value) vals.push(sel.options[i].value); // a bit of testing never hurts
}
show(vals);

// Plain JS using map of HTMLOptionElements - note the el
vals = Array.apply(null, sel.options).map(function(el) { return el.value; });
show(vals);

// ES6 JS using spread and map of HTMLOptionElements - note the fat arrow and el
if (supportsES6) 
  document.write(`<script>

  vals = [...sel.options].map(el => el.value);

show(vals);
<\/script>`
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select>
<option value="Please select">Text 0</option>
<option value="one">Text 1</option>
<option value="two">Text 2</option>
<option value="three">Text 3</option>
</select><br/> 
The above select has the following option values:<br/>
<span id="result"></span>
jobtbby3

jobtbby32#

最简洁的解决方案是这样的:

Array.apply(null, selectbox.options)

Array.apply调用Array构造函数,第一个参数作为上下文(即this),第二个参数是任何类似数组的对象(MDN reference)。
我们传递null作为第一个参数,因为我们不是试图调用特定对象的方法,而是全局构造函数。
所以总的来说

Array.apply(null, A)

将创建一个包含任何“类数组”对象A的元素的适当数组。

5cg8jx4n

5cg8jx4n3#

要将所有值放入数组:

var options = document.getElementById('selectId').options;
var values = [];
var i = 0, len = options.length;

while (i < len)
{
  values.push(options[i++].value);
}
alert(values.join(', '));

小提琴:http://jsfiddle.net/garreh/64pyb/1/

一个很长的路要做的事情短
你可以用for循环,虽然不会短很多,但会更难看;

for (var options = document.getElementById('selectId').options,
          values, i = 0, len = options.length; i < len;i++)
  values.push(options[i].value);

alert(values.join(', '));

不过,很遗憾你没有使用像jQuery这样的库。您可以执行以下操作:

$('select > option').map(function() { return this.value; }).get();
doinxwow

doinxwow4#

spread operator使它变得非常容易([ ...ElementList ])。
因此,对于您的情况,您可以执行以下操作:
arr = document.getElementById('store-locator-region')
然后使用spread操作符将html select元素转换为对象数组:
newArr = [...arr]
然后迭代对象数组以获得最终数组:
countryList = newArr.map(a => a.value)(97) ["XE", "AL", "DZ", "AD", "AR", "AM", etc..]

fgw7neuy

fgw7neuy5#

selecbox.options是一个集合(nodeList)。您可以像处理数组一样迭代它的元素,并将集合的成员推送到一个真实的的数组中。
我要记录在案:在所有浏览器中,除了IE<9,你可以使用[].slice.call(selecbox.options);1来快速将集合转换为数组。
因此,将nodeList集合转换为数组的跨浏览器方法是:

function coll2array(coll){
    var ret = [];
    try {
       ret = [].slice.call(coll)
    }
    catch(e) {
        for (var i =0;i<coll.length;i++){
            ret.push(coll[i]);
        }
    }
    return ret;
}

[edit]现在(ES 2015及更高版本)我们可以使用Array.from(options)[...options]

1Array.prototype.slice.call([some collection])

czfnxgou

czfnxgou6#

select.options不是一个数组,它是一个NodeList,它共享数组的一些特性,因此可以被描述为array like。一个NodeList没有Array的方法,但是你可以call或者apply这些方法。在你的例子中,你可以这样调用join方法:

var opts = yourSelect.options;
var str = Array.prototype.join.call( opts, ',' );

或者,您可以使用类似的技术将NodeList转换为真正的Array

// slice returns a new array, which is what we want
var optsArray = Array.prototype.slice.call( opts );
mo49yndu

mo49yndu7#

你可以连接一个字符串数组,但选项不是字符串,它是一个具有各种属性(如value和text)的对象。它应该使用哪个来加入?
你只需要写一个循环来附加你想要的所有值。
或者使用一个库并使用each()函数来遍历选项。

i2byvkas

i2byvkas8#

我想知道为什么没有人这样说:

$(selecbox).find("option").map((index, option) => {
  // do stuff
});

相关问题