javascript select option对象总结

javascript select option对象总结

一、基础理解： var e = document.getElementByIdx_x("selectId"); e.options = new Option("文本", "值"); //创建一个option对象，即在<select>标签中创建一个或多个<option value="值">文本</option>。 options是一个数组，里面可存放多个<option value="值">文本</option>标签。   1、options 数组的属性： length ===== 长度属性 selectedIndex ===== 当前被选中的文本的索引值，此索引值是内存自动分配的(0,1,2,3....)对应(第一个文本值，第二个文本值，第三个文本值，第四个文本值.......)   2、单个option的属性(即obj.options[obj.selectedIndex]是指定的某个<option>标签)： text ===== 返回/指定文本 value ===== 返回/指定文本，与<option value="...">一致 index ====== 返回下标 selected ====== 返回/指定该对象是否被选中，指定true or false可动态改变选中项 defaultSelected ===== 返回该对象默认是否被选中，true or false   3、option的方法： 增加一个<option>标签 ====== obj.options.add(new("文本", "值")) 删除一个<option>标签 ====== obj.options.remove(obj.selectedIndex); 获取一个<option>标签 ====== obj.options[obj.selectedIndex].text ; 修改一个<option>标签 ====== obj.options[obj.selectedIndex] = new Option("新文本", "值") ; 删除所有<option>标签 ====== obj.options.length = 0 ; 获取一个<option>标签的值 ===== obj.options[obj.selectedIndex].value ;   注意：      obj.option中的option不需要大写      new Option中的option需要大写   实例: 1 检测是否有选中 if(objSelect.selectedIndex > -1) {   alert("选中");//说明选中 } else {   alert("没有选中");//说明没有选中 } 2.动态创建select function createSelect(){   var mySelect = document.createElement_x("select");   mySelect.id = "mySelect";   document.body.appendChild(mySelect); } 3.添加选项option function addOption(){   //根据id查找对象，   var obj=document.getElementByIdx_x('mySelect');   //添加一个选项    //obj.add(new Option("文本","值"));    //只能在IE中有效      obj.options.add(new Option("文本","值")); //兼容IE与firefo  } 4.删除所有选项option function removeAll(){   var obj=document.getElementByIdx_x('mySelect');   obj.options.length=0; } 5.删除一个选项option  remove function removeOne(){   var obj=document.getElementByIdx_x('mySelect');   //index,要删除选项的序号，这里取当前选中选项的序号   var index=obj.selectedIndex;   obj.options.remove(index); } 6.获得选项option的值 var obj=document.getElementByIdx_x('mySelect'); var index=obj.selectedIndex; //序号，取当前选中选项的序号 var val = obj.options[index].value; 7.获得选项option的文本 var obj=document.getElementByIdx_x('mySelect'); var index=obj.selectedIndex; //序号，取当前选中选项的序号 var val = obj.options[index].text; 8.修改选项option var obj=document.getElementByIdx_x('mySelect'); var index=obj.selectedIndex; //序号，取当前选中选项的序号 var val = obj.options[index]=new Option("新文本","新值"); 9.删除select function removeSelect(){   var mySelect = document.getElementByIdx_x("mySelect");   mySelect.parentNode.removeChild(mySelect); } 9.综合实例（项目中用到） <script language="javascript" type="text/javascript">  function form_page.SERRTYPE.onchange(){      var r = $("#SERRTYPE").val();    var XLS_ID = $("#XLS_ID").val();    showErr(r,XLS_ID,'');    //alert("SERRTYPE:"+r +"  XLS_ID="+XLS_ID);       }  function showErr(SERRTYPE,XLS_ID,ERRID){   $.get("wage--emp_wage---getErr.shtml?SERRTYPE="+SERRTYPE+"&XLS_ID="+XLS_ID,function(data){            var err = data.split(',');    var obj=document.getElementByIdx_x('ERRID');    obj.options.length=0;    //obj.add(new Option("--请选择--",""));    obj.add(new Option("",""));    for(i=0;i<err.length;i++){     var r = err[i].split(':');    //obj.add(new Option("文本","值"));    //只能在IE中有效       obj.options.add(new Option(r[1],r[0])); //兼容IE与firefo     if(ERRID!=null){         if(r[0] == ERRID){      //alert("ERRID="+ERRID+"r[1]="+r[0]);      obj.options[i+1].selected=true;     }    }   }      });  }

</script>

实现查询后保留查询条件，加上onLoad事件即可（例： onLoad="showErr('<%=SERRTYPE %>','<%=XLS_ID %>','<%=ERRID %>');"）

页面显示：

<select id="ERRID" name="ERRID">
  <option value=""></option>
</select>