javasript 操作option select

javascript select option对象总结

2009-09-28 08:59

一、基础理解： var e = document.getElementById("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/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) { //说明选中 } else { //说明没有选中 } 2.动态创建select function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 3.添加选项option function addOption(){ //根据id查找对象， var obj=document.getElementById('mySelect'); //添加一个选项 obj.add(new Option("文本","值")); } 4.删除所有选项option function removeAll(){ var obj=document.getElementById('mySelect'); obj.options.length=0; } 5.删除一个选项option function removeOne(){ var obj=document.getElementById('mySelect'); //index,要删除选项的序号，这里取当前选中选项的序号 var index=obj.selectedIndex; obj.options.remove(index); } 6.获得选项option的值 var obj=document.getElementById('mySelect'); var index=obj.selectedIndex; //序号，取当前选中选项的序号 var val = obj.options[index].value; 7.获得选项option的文本 var obj=document.getElementById('mySelect'); var index=obj.selectedIndex; //序号，取当前选中选项的序号 var val = obj.options[index].text; 8.修改选项option var obj=document.getElementById('mySelect'); var index=obj.selectedIndex; //序号，取当前选中选项的序号 var val = obj.options[index]=new Option("新文本","新值"); 9.删除select function removeSelect(){ var mySelect = document.getElementById("mySelect"); mySelect.parentNode.removeChild(mySelect); }