functionremoveAll(){ var obj = document.getElementById('mySelect'); obj.options.length = 0; }
4.删除一个选项option
functionremoveOne(){ var obj = document.getElementById('mySelect'); //index,要删除选项的序号,这里取当前选中选项的序号 var index = obj.selectedIndex; obj.options.remove(index); }
5.获得选项option的值
var obj = document.getElementById('mySelect'); var index = obj.selectedIndex; //序号,取当前选中选项的序号 var val = obj.options[index].value;
6.获得选项option的文本
var obj = document.getElementById('mySelect'); var index = obj.selectedIndex; //序号,取当前选中选项的序号 var val = obj.options[index].text;
7.修改选项option
var obj = document.getElementById('mySelect'); var index = obj.selectedIndex; //序号,取当前选中选项的序号 obj.options[index] = newOption("新文本","新值");
8.删除select
functionremoveSelect(){ var mySelect = document.getElementById("mySelect"); mySelect.parentNode.removeChild(mySelect); }
整个实例的完整代码如下:
<!DOCTYPE HTMLPUBLIC"-//W3C//DTD HTML 4.01//ZH-CN""http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <metahttp-equiv="Content-Type"content="text/html"> <head> <scriptlanguage=JavaScript> function$(id) { returndocument.getElementById(id); } functionshow() { var selectObj = $("area"); var myOption = document.createElement("option"); myOption.setAttribute("value", "10"); myOption.appendChild(document.createTextNode("上海")); var myOption1 = document.createElement("option"); myOption1.setAttribute("value", "100"); myOption1.appendChild(document.createTextNode("南京")); selectObj.appendChild(myOption); selectObj.appendChild(myOption1); } functionchoice() { var index = $("area").selectedIndex; var val = $("area").options[index].getAttribute("value") if (val == 10) { var i = $("context").childNodes.length - 1; var remobj = $("context").childNodes[i]; remobj.removeNode(true) var sh = document.createElement("select") sh.add(newOption("浦东新区","101")) sh.add(newOption("黄浦区", "102")) sh.add(newOption("徐汇区", "103")) sh.add(newOption("普陀区", "104")) $("context").appendChild(sh) } elseif (val == 100) { var i = $("context").childNodes.length - 1; var remobj = $("context").childNodes[i]; remobj.removeNode(true); var nj = document.createElement("select"); nj.add(newOption("玄武区", "201")); nj.add(newOption("白下区", "202")); nj.add(newOption("下关区", "203")); nj.add(newOption("栖霞区","204")); $("context").appendChild(nj); } } functioncalc() { var x = $("context").childNodes.length - 1; alert(x) } functionremove() { var i = $("context").childNodes.length - 1; var remobj = $("context").childNodes[i]; remobj.removeNode(true) } </script> <body> <divid="context"> <selectid="area"onchange="choice()"></select> </div> <inputtype=buttonvalue="显示"onclick="show()"> <inputtype=buttonvalue="计算结点"onclick="calc()"> <inputtype=buttonvalue="删除"onclick="remove()"> </body> </html>
改进版:在select中添加、修改、删除option元素
functionwatch_ini() { // 初始 for (var i = 0; i < arguments.length; i++) { var word = document.createElement("OPTION"); word.text = arguments[i]; watch.keywords.add(word); // watch. is form name } } functionwatch_add(f){ // 增加 var word=document.createElement("OPTION"); word.text = f.word.value; f.keywords.add(word); } // 但上述 add() 方法只在IE下有效, 为兼容FF和Opera, 对上述代码进行了一下改进, 改动后代码如下: functionwatch_ini() { // 初始 for(var i = 0; i < arguments.length; i++){ var oOption = newOption(arguments[i],arguments[i]); document.getElementById("MySelect")[i] = oOption; } } functionwatch_add(f) { // 增加 var oOption = newOption(f.word.value,f.word.value); f.keywords[f.keywords.length] = oOption; }
整个实例的完整代码如下:
<!doctype htmlpublic"-//w3c//dtd html 4.0 transitional//en"> <html>
<head> <title>javascript select options text value</title> <metaname="keywords"content="javascript select options text value add modify delete set"> <metaname="description"content="javascript select options text value add modify delete set"> <scriptlanguage="javascript"> functionwatch_ini() { // 初始 for (var i = 0; i < arguments.length; i++) { var oOption = newOption(arguments[i], arguments[i]); document.getElementById("MySelect")[i] = oOption; } } functionwatch_add(f) { // 增加 var oOption = newOption(f.word.value, f.word.value); f.keywords[f.keywords.length] = oOption; } functionwatch_sel(f) { // 编辑 f.word.value = f.keywords[f.keywords.selectedIndex].text; } functionwatch_mod(f) { // 修改 f.keywords[f.keywords.selectedIndex].text = f.word.value; } functionwatch_del(f) { // 删除 f.keywords.remove(f.keywords.selectedIndex); } functionwatch_set(f) { // 保存 var set = ""; for (var i = 0; i < f.keywords.length; i++) { set += f.keywords[i].text + ";"; } confirm(set); } </script> </head>