如何动态给select标签添加选项?

select标签已经渲染到dom后,给其添加option,一般人会想到通过添加option标签达到目的:

var $select = $("selectType");
$select.append('<option value="test">test');

实际上你会发现,在浏览器中并没有效果,即便F12工具里该标签已存在。

原因在于,dom渲染后,select标签会将其包含的所有子元素作为其options属性存储中,这是一个类数组对象,只有通过操作这个属性,才能达到真正想要的效果

一个optionElement

var eOption = document.createElement('option');
eOption.value = test;
eOption.appendChild(document.createTextNode("test"));

// 插入该对象,两种方法

// 由于select是类数组对象,没有数组的push等方法

Array.prototype.push.call($select[0],eOption); // 很奇怪,此处this应绑定$select[0],而不是$select[0].options

// 或者使用 select.options.add 方法

$select[0].options.add(eOption);

相关文章

显卡天梯图2024最新版,显卡是电脑进行图形处理的重要设备,...
初始化电脑时出现问题怎么办,可以使用win系统的安装介质,连...
todesk远程开机怎么设置,两台电脑要在同一局域网内,然后需...
油猴谷歌插件怎么安装,可以通过谷歌应用商店进行安装,需要...
虚拟内存这个名词想必很多人都听说过,我们在使用电脑的时候...