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

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

var $select = $("selectType");

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

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!