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