javascript如何操作HTML下拉列表标签
先给大家讲下大概实现思路，具体内容介绍请看下面。
判断select选项中是否存在Value="paraValue"的Item
向select选项中加入一个Item
从select选项中删除一个Item
删除select中选中的项
修改select选项中value="paraValue"的text为"paraText"
设置select中text="paraText"的第一个Item为选中
设置select中value="paraValue"的Item为选中
得到select的当前选中项的value
得到select的当前选中项的text
得到select的当前选中项的Index
清空select的项
js代码
//1.判断select选项中是否存在Value="paraValue"的Item
functionjsSelectIsExitItem(objSelect,objItemValue){
varisExit=false;
for(vari=0;i<objSelect.options.length;i++){
if(objSelect.options[i].value==objItemValue){
isExit=true;
break;
}
}
returnisExit;
}
//2.向select选项中加入一个Item
functionjsAddItemToSelect(objSelect,objItemText,objItemValue){
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue)){
alert("该Item的Value值已经存在");
}else{
varvarItem=newOption(objItemText,objItemValue);
objSelect.options.add(varItem);
alert("成功加入");
}
}
//3.从select选项中删除一个Item
functionjsRemoveItemFromSelect(objSelect,objItemValue){
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue)){
for(vari=0;i<objSelect.options.length;i++){
if(objSelect.options[i].value==objItemValue){
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
}else{
alert("该select中不存在该项");
}
}
//4.删除select中选中的项
functionjsRemoveSelectedItemFromSelect(objSelect){
varlength=objSelect.options.length-1;
for(vari=length;i>=0;i--){
if(objSelect[i].selected==true){
objSelect.options[i]=null;
}
}
}
//5.修改select选项中value="paraValue"的text为"paraText"
functionjsUpdateItemToSelect(objSelect,objItemText,objItemValue){
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue)){
for(vari=0;i<objSelect.options.length;i++){
if(objSelect.options[i].value==objItemValue){
objSelect.options[i].text=objItemText;
break;
}
}
alert("成功修改");
}else{
alert("该select中不存在该项");
}
}
//6.设置select中text="paraText"的第一个Item为选中
functionjsSelectItemByValue(objSelect,objItemText){
//判断是否存在
varisExit=false;
for(vari=0;i<objSelect.options.length;i++){
if(objSelect.options[i].text==objItemText){
objSelect.options[i].selected=true;
isExit=true;
break;
}
}
//Show出结果
if(isExit){
alert("成功选中");
}else{
alert("该select中不存在该项");
}
}
//7.设置select中value="paraValue"的Item为选中
document.all.objSelect.value=objItemValue;
//8.得到select的当前选中项的value
varcurrSelectValue=document.all.objSelect.value;
//9.得到select的当前选中项的text
varcurrSelectText=document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
//10.得到select的当前选中项的Index
varcurrSelectIndex=document.all.objSelect.selectedIndex;
//11.清空select的项
document.all.objSelect.options.length=0;
以上内容介绍了javascript操作html下拉列表标签的方法，希望大家喜欢本文所述。