js动态改变select选择变更option的index值示例
document.getElementById("louyuming").options[0].selected=true; functionjsSelectIsExitItem(objSelect,objItemValue){ varisExit=false; for(vari=0;i<objSelect.options.length;i++){ if(objSelect.options[i].value==objItemValue){ isExit=true; break; } } returnisExit; }
Javascript操作select是表单中常见的一种,今天删除多个select值的时候出现了问题,搞了半天原来是索引引起的(即删除的时候要从索引大的开始删,然后再删除索引小的,否则删除了索引小的后索引大的索引就变化了,再删除时就会出现问题--问题的关键是for循环是要从大到小,而不是常规的从0到length)
//4.删除select中选中的项 functionjsRemoveSelectedItemFromSelect(objSelect){ varlength=objSelect.options.length-1; for(vari=length;i>=0;i--){ if(objSelect[i].selected==true){ objSelect.options[i]=null; } } }
1判断select选项中是否存在Value="paraValue"的Item
2向select选项中加入一个Item
3从select选项中删除一个Item
4删除select中选中的项
5修改select选项中value="paraValue"的text为"paraText"
6设置select中text="paraText"的第一个Item为选中
7设置select中value="paraValue"的Item为选中
8得到select的当前选中项的value
9得到select的当前选中项的text
10得到select的当前选中项的Index
11清空select的项
======================================================================
动态删除select中的所有options:
functiondeleteAllOptions(sel){ sel.options.length=0; }
动态删除select中的某一项option:
functiondeleteOption(sel,indx){ sel.options.remove(indx); }
动态添加select中的项option:
functionaddOption(sel,text,value){ sel.options.add(newOption(text,value)); }
上面在IE和FireFox都能测试成功,希望以后可以用上。
===========================================
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为选中 objSelect.value=objItemValue; //8.得到select的当前选中项的value varcurrSelectValue=objSelect.value; //9.得到select的当前选中项的text varcurrSelectText=objSelect.options[document.all.objSelect.selectedIndex].text; //10.得到select的当前选中项的Index varcurrSelectIndex=objSelect.selectedIndex; //11.清空select的项 objSelect.options.length=0;
整个实例的完整代码如下:
<!doctypehtmlpublic"-//w3c//dtdhtml4.0transitional//en"> <html> <head> <title>javascriptselectoptionstextvalue</title> <metaname="keywords"content="javascriptselectoptionstextvalueaddmodifydeleteset"> <metaname="description"content="javascriptselectoptionstextvalueaddmodifydeleteset"> <scriptlanguage="javascript"> <!-- //Author:i@lxl.cn //Modify:i@cnlei.com functionwatch_ini(){//初始 for(vari=0;i<arguments.length;i++){ varoOption=newOption(arguments[i],arguments[i]); document.getElementById("MySelect")[i]=oOption; } } functionwatch_add(f){//增加 varoOption=newOption(f.word.value,f.word.value); f.keywords[f.keywords.length]=oOption; } functionwatch_sel(f){//编辑 f.word.value=f.keywords[f.keywords.selectedIndex].text; } functionwatch_mod(f){//修改 f.keywords[f.keywords.selectedIndex].text=f.word.value; } functionwatch_del(f){//删除 f.keywords.remove(f.keywords.selectedIndex); } functionwatch_set(f){//保存 varset=""; for(vari=0;i<f.keywords.length;i++){ set+=f.keywords[i].text+";"; } confirm(set); } //--> </script> </head> <body> <formname="watch"method="post"action=""> <selectid="MySelect"name="keywords"size="10"onchange="watch_sel(this.form)"></select><br> <scriptlanguage="javascript"> <!-- watch_ini("我","你","妳","他","她","它","尔");//初始关键词 //--> </script> <inputtype="text"name="word"/><br/> <inputtype="button"value="增加"onclick="watch_add(this.form);"/> <inputtype="button"value="修改"onclick="watch_mod(this.form);"/> <inputtype="button"value="删除"onclick="watch_del(this.form);"/> <inputtype="button"value="保存"onclick="watch_set(this.form);"/> </form> </body> </html>