javascript 操作 select总结

一、基础理解:
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); 
}

你可能感兴趣的:(JavaScript)