先给大家讲下大概实现思路，具体内容介绍请看下面。
判断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
function jsselectisexititem(objselect, objitemvalue) { var isexit =false; for (var i =0; i < objselect.options.length; i++) { if (objselect.options[i].value == objitemvalue) { isexit =true; break; } } return isexit; }
// 2.向select选项中 加入一个item
function jsadditemtoselect(objselect, objitemtext, objitemvalue) { //判断是否存在 if (jsselectisexititem(objselect, objitemvalue)) { alert("该item的value值已经存在"); }else{ var varitem =new option(objitemtext, objitemvalue); objselect.options.add(varitem); alert("成功加入"); } }
// 3.从select选项中 删除一个item
function jsremoveitemfromselect(objselect, objitemvalue) { //判断是否存在 if (jsselectisexititem(objselect, objitemvalue)) { for (var i =0; i < objselect.options.length; i++) { if (objselect.options[i].value == objitemvalue) { objselect.options.remove(i); break; } } alert("成功删除"); }else{ alert("该select中 不存在该项"); } }
// 4.删除select中选中的项
function jsremoveselecteditemfromselect(objselect) { var length = objselect.options.length -1; for(var i = length; i >=0; i--){ if(objselect[i].selected ==true){ objselect.options[i] =null; } } }
// 5.修改select选项中 value="paravalue"的text为"paratext"
function jsupdateitemtoselect(objselect, objitemtext, objitemvalue) { //判断是否存在 if (jsselectisexititem(objselect, objitemvalue)) { for (var i =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为选中
function jsselectitembyvalue(objselect, objitemtext) { //判断是否存在 var isexit =false; for (var i =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
var currselectvalue = document.all.objselect.value;
// 9.得到select的当前选中项的text
var currselecttext = document.all.objselect.options[document.all.objselect.selectedindex].text;
// 10.得到select的当前选中项的index
var currselectindex = document.all.objselect.selectedindex;
// 11.清空select的项
document.all.objselect.options.length =0;
以上就是详解javascript操作html下拉列表标签的示例详解的详细内容。