Select的创建，修改，取值，删除javascript代码

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
function createSelect(s_id) {
    var mySelect = document.createElement("select");
    mySelect.id = s_id;
    document.body.appendChild(mySelect);
}

function addOption(x_text, y_value, s_id) {
    var obj = document.getElementById(s_id);
    // obj.add(new Option(x_text, y_value)); //  创建方式1
    obj.options[obj.options.length] = new Option(x_text, y_value); //  创建方式2
}

//清除select选项
function removeAll(s_id) {
    var obj = document.getElementById(s_id);
    obj.options.length = 0;
}

//清除指定的option
function removeOne(s_id, index) {
    var obj = document.getElementById(s_id);
    // obj.options.remove(index); // 清除方式1 
    obj.options[index] = null; // 清除方式2 
}

//清除选中的option
function removeSelectOne(s_id) {
    var obj = document.getElementById(s_id);
    var s_index = obj.selectIndex;
    obj.options.remove(s_index);
    
}

//获得选项option的value值 text值
function getValue(s_id) {
    var obj = document.getElementById(s_id);
    var s_index = obj.selectedIndex;
    var s_value = obj.options[s_index].value;
    var s_text = obj.options[s_index].text;
    alert(s_value);
    alert(s_text);
}

function edit(s_id, index, x_text, y_value) {
    var obj = document.getElementById(s_id);
    obj.options[index] = new Option(x_text, y_value);
}

function removeSelect(s_id) {
    var mySelect = document.getElementById(s_id);
    mySelect.parentNode.removeChild(mySelect);
}

createSelect("mySelect");
addOption("文本1", "值1", "mySelect");
addOption("文本2", "值2", "mySelect");
addOption("文本3", "值3", "mySelect");

createSelect("mySelect2");
addOption("文本1", "值1", "mySelect2");
addOption("文本2", "值2", "mySelect2");
addOption("文本3", "值3", "mySelect2");

// removeAll("mySelect2");
// removeOne("mySelect",1);
// removeSelectOne("mySelect");
// getValue("mySelect");
edit("mySelect",2,1,3);
// removeSelect("mySelect2")
</script>

</body>
</html>

HTML DOM remove() 方法
remove() 方法用于从下拉列表删除选项。
语法 selectObject.remove(index) 注意该element是select对象
该方法从选项数组的指定位置移除 <option> 元素。如果指定的下标比 0 小，或者大于或等于选项的数目，remove() 方法会忽略它并什么也不做。

了解几点：
获取某个form下的options数组 selectObject.options
options[x] 可以获取对应的 option;
创建一个新的option 方式 new Option(text,value)
option选项的value值 option[1].value 对应的显示文本值 option[1].text；

posted on 2014-09-25 16:16 bigdesign 阅读(277) 评论(0) 编辑收藏举报