javascript操作select的一些基本方法总结

T1 >>> 创建一个新的select
var sel_obj = document.createElement('select');

T2 >>> 创建一个新的option
方式1：
var new_option = document.createElement('option');
new_option.text = 'txt'
new_option.value = 'value'
方式2：
var new_option = nre Option('txt','value');

T3 >>> 将option添加进数组 options
方式1：
try {
// 标准浏览器
sel_obj.add(new_option, sel_obj.options[x]); // 表示将 new_option 添加到sel_obj.options[x] 序列之前,
// 值为 null 表示将 new_option 添加到序列最后。
} catch (ex) {
// IE 浏览器
sel_obj.add(new_option, num);
// num 参数序列。值格式与标准浏览器有区别。可省略 。省略表示将 new_option 添加到序列最后。
}

add方法还要说明一下，主要是看到有人将add()方法的对象换成了sel_obj.options 经过测试：

try {
// 标准浏览器
sel_obj.options.add(new_option, sel_obj.options[x]); // 此处的 sel_obj 也可以用 select 的 id 值(必须是select的) s_id.options 一样可以使用.
// sel_obj.options[x] 没有 情况下，插入 options 序列 最后。
// sel_obj.options[x] *变化* 情况下，即使设置为null，new_option 均插入 options 序列 最前。
} catch (ex) {
// IE 浏览器
sel_obj.options.add(new_option, num);
// 表现和未用 options 结果一致
// num 参数序列。值格式与标准浏览器有区别。可省略 。省略表示将 new_option 添加到序列最后。
}

add() 方法是专用于 select 。如同 sel_obj.remove(index).
Array是没有 add() 方法的。

方式2：
sel_obj.appendChild (new_option );

方式3：
sel_obj.insertBefore (new_option,_option)
// 在已有的 _option 前插入 new_option ，如果没有设置_option ，则插入到最后。均为Node object。
// 所有浏览器均支持insertBefore。
// node.insertBefore(newnode,existingnode)
// newnode指新添加的 Node 对象 （必须）
// existingnode 指已有的 Node object （可选）, 如果该参数没有，表示将newnode添加到node父节点最后。
// insertBefore 方法不只用于 select ，其他地方也可以。区别与 add() 方法。

注意 javescript 没有对应的 insertAfter () 方法。不过jquery 有 insertAfter() 方法。
可以自己定义一个：

function insertAfter(new_option, _option) {
var parent_option = _option.parentNode;
if (parentEl.lastChild == _option) {
parent_option.appendChild(new_option);
} else {
parent_option.insertBefore(new_option, _option.nextSibling);
}
}

方式4
sel_obj.options[sel_obj.options.length] = new Option ('新文本','新值')
// 如果这里options[]的索引值小于length，则不会添加，只会修改已有的 option 值。

T4 >>> 将select添加到页面
document.body.appendChild(sel_obj);

T5 >>> 清除select的option选项
方式1
sel_obj.remove(index); // 清除指定索引的option项
sel_obj.options.remove(index)
// 如果指定的下标比 0 小，或者大于或等于选项的数目，remove() 方法会忽略它并什么也不做。

方式2
sel_obj.options[index] = null
// 如果把 options[] 数组中的一个元素设置为 null，那么选项就会从 Select 对象中删除。

方式3
sel_obj.length=0;
sel_obj.options.length=0; // 清除所有的option项
// 如果把 options.length 属性设置为 0 , Select 对象中所有选项都会被清除。

// options[] 说明:
// 集合并非一个普通的 HTMLcollection。为了和早期的浏览器向后兼容，这个集合有某种特殊的行为：
// 允许通过 Select 对象来改变显示的选项：
// 如果 options.length 属性的值比当前值小，出现在数组尾部的元素就会被丢弃。
// 可以通过构造函数 Option() 来创建一个新的 option 对象（需要设置 options.length 属性）。

// Select 对象属性:
// id 设置或返回下拉列表的 id。
// length 返回下拉列表中的选项数目。
// form 返回对包含下拉列表的表单的引用。 获取包含该select的form对象

A6 >>> 修改select的option选项
方式一
sel_obj.options[index]=new Option("新文本","新值"); // 此处index的值是修改的索引值

方式二
sel_obj.options[index].text = "新文本"
sel_obj.options[index].value = "新值"

A7 >>> 删除一个select
sel_obj.parentNode.removeChild(sel_obj);
sel_obj.parentNode.remove(); // 这个会将 sel_obj.parentNode 整个删除 。

注：获取 options的数组方式

sel_obj.getElementsByTagName("option")
// object NodeList
// 获取的是option数组 。但是与options还是有区别的。
// 比如设置
// sel_obj.getElementsByTagName("option") = 'null' // 无效
// sel_obj.getElementsByTagName.length = 0 // 无效

sel_obj.options
// object HTMLoptionCollection