这篇文章介绍html select option详细说明
javascript之HTML（select option）详解
一、基础理解:
var e = document.getElementById("selectId");
e. options= new Option("文本","值") ;
//创建一个option对象,即在
1.动态创建select
function createSelect(){
立即学习“前端免费学习笔记（深入）”；
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
2.添加选项option
function addOption(){
//根据id查找对象，
var obj=document.getElementById('mySelect');
//添加一个选项
obj.add(new Option("文本","值")); //这个只能在IE中有效
obj.options.add(new Option("text","value")); //这个兼容IE与firefox
}
3.删除所有选项option
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}
4.删除一个选项option
function removeOne(){
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; //序号，取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");
8.删除select
function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html"><head><script language=JavaScript>function $(id){return document.getElementById(id)}function show(){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)}function choice(){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(new Option("浦东新区","101"))sh.add(new Option("黄浦区","102"))sh.add(new Option("徐汇区","103"))sh.add(new Option("普陀区","104"))$("context").appendChild(sh)}if(val==100){var i=$("context").childNodes.length-1;var remobj=$("context").childNodes[i];remobj.removeNode(true)var nj=document.createElement("select")nj.add(new Option("玄武区","201"))nj.add(new Option("白下区","202"))nj.add(new Option("下关区","203"))nj.add(new Option("栖霞区","204"))$("context").appendChild(nj)}}function calc(){var x=$("context").childNodes.length-1;alert(x)}function remove(){var i=$("context").childNodes.length-1;var remobj=$("context").childNodes[i];remobj.removeNode(true)}</script><body><p id="context"><select id="area" onchange="choice()"></select></p><input type=button value="显示" onclick="show()"><input type=button value="计算结点" onclick="calc()"><input type=button value="删除" onclick="remove()"></body></html>/*** @description 构件联动下拉列表 (用JQUERY 的AJAX配合JSON实现)* @prarm selectId 下拉列表的ID* @prarm method 要调用的方法名称* @prarm temp 此处存放软件ID* @prarm url 要跳转的地址*/function linkAgeJson(selectId,method,temp,url){ $j.ajax({ type: "get",//使用get方法访问后台dataType: "json",//返回json格式的数据url: url,//要访问的后台地址data: "method=" + method+"&temp="+temp,//要发送的数据 success: function(msg){//msg为返回的数据，在这里做数据绑定var data = msg.lists;coverJsonToHtml(selectId,data); }});}/*** @description 将JSON数据转换成HTML数据格式* @prarm selectId 下拉列表的ID* @prarm nodeArray 返回的JSON数组**/function coverJsonToHtml(selectId,nodeArray){//get selectvar tempSelect=$j("#"+selectId);//clear select valueisClearSelect(selectId,'0'); var tempOption=null;for(var i=0;i<nodeArray.length;i++){//create select OptiontempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');//put Option to selecttempSelect.append(tempOption);}// 获取退化构件列表getCpgjThgl(selectId,'thgjDm');}/*** @description 清空下拉列表的值* @prarm selectId 下拉列表的ID* @prarm index 开始清空的下标位置*/function isClearSelect(selectId,index){var length=document.getElementById(selectId).options.length;while(length!=index){//长度是在变化的，因为必须重新获取length=document.getElementById(selectId).options.length;for(var i=index;i<length;i++)document.getElementById(selectId).options.remove(i);length=length/2;}}/*** @description 获取退化构件列表* @prarm selectId1 引用软件下拉列表的ID* @prarm selectId2 退化构件下拉列表的ID*/function getCpgjThgl(selectId1,selectId2){var obj1=document.getElementById(selectId1);//引用软件下拉列表var obj2=document.getElementById(selectId2);//退化构件下拉列表var len=obj1.options.length;//当引用软件列表长度等于1时返回，不做操作if(len==1){return false;}//清空下拉列表的值，两种方式都可以// isClearSelect(selectId2,'1');document.getElementById(selectId2).length=1;for(var i=0;i<len; i++){var option= obj1.options[i];//引用软件被选中项不加入if(i!=obj1.selectedIndex){//克隆OPTION并添加到SELECT中 obj2.appendChild(option.cloneNode(true));}}}
<TABLE width="100%" border=0 align="left" cellPadding=0 cellSpacing=1><tr><td class="Search_item_18"> <span class="Edit_mustinput">*</span>引用软件：</td><td class="Search_content_82"><input name="yyrjMc" id="yyrjMc" type="text" class="Search_input" tabindex="3" size="30" ><input name="yyrjDm" id="yyrjDm" type="hidden" ><input type="button" class="Search_button_select"onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="选择..."></td></tr><tr><td class="Search_item"> <span class="Edit_mustinput">*</span>引用分版：</td><td class="Search_content" id="yyfb"><select name="yyfbDm" style="width:160" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')"></select></td></tr><tr><td class="Search_item">退化构件：</td><td class="Search_content" id="thgj"><select name="thgjDm" style="width:160" id="thgjDm"><option value="-1" selected>无</option></select></td></tr></TABLE>
标签： htmloption