JavaScript操作select元素和option的实例代码
废话不多说了,直接给大家贴代码,具体代码如下所示:
<!DOCTYPEhtmlPUBLIC"-//WC//DTDXHTML.Transitional//EN""http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <htmlxmlns="http://www.w.org//xhtml"> <head> <title></title> <!--添加jquery--> <scriptsrc="../Script/jQuery/jquery-...min.js"type="text/javascript"></script> <scripttype="text/javascript"> $(function(){ createSelect("select","addSel"); addOption("addSel","first","第一个数据"); addOption("addSel","secord","第二个数据"); addOption("addSel","three","第三个数据"); addOption("addSel","four","第四个数据"); addOption("addSel","fives","第五个数据"); removeOneByIndex("addSel",); removeOneByObj("addSel","secord"); //添加一个option更改事件调用自己写的方法 $("#addSel").change(function(){ alert("旧文本:"+getOptionText("addSel")+"旧Value:"+getOptionValue("addSel")); editOptions("addSel","新文本","新Value");//注意:不传value值的时候value值默认为text的值 alert("新文本:"+getOptionText("addSel")+"新Value:"+getOptionValue("addSel")); }) }) //动态创建带id的元素 functioncreateSelect(element,id){ varselect=document.createElement(element); select.id=id; document.body.appendChild(select); } //根据select的id添加选项option functionaddOption(selectID,value,text){ //根据id查找对象, varobj=document.getElementById(selectID); obj.options.add(newOption(text,value));//这个兼容IE与firefox } //删除所有选项option functionremoveAll(selectID){ varobj=document.getElementById(selectID); obj.options.length=; } //根据index值删除一个选项option functionremoveOneByIndex(selectID,index){ varobj=document.getElementById(selectID); //index,要删除选项的序号,这里取当前选中选项的序号 //varindex=obj.selectedIndex;//获取选中的选项的index; obj.options.remove(index); } //根据value或者text值删除一个选项option functionremoveOneByObj(selectID,textOrValue){ varobj=document.getElementById(selectID); //index,要删除选项的序号,这里取当前选中选项的序号 //varindex=obj.selectedIndex;//获取选中的选项的index; for(vari=;i<obj.options.length;i++){ if(obj.options[i].innerHTML==textOrValue||obj.options[i].value==textOrValue){ obj.options.remove(i); break; } } } //获得一个OptionValue; functiongetOptionValue(selectID){ varobj=document.getElementById(selectID); varindex=obj.selectedIndex;//序号,取当前选中选项的序号 varval=obj.options[index].value; returnval; } //获得一个optionText; functiongetOptionText(selectID){ varobj=document.getElementById(selectID); varindex=obj.selectedIndex;//序号,取当前选中选项的序号 varval=obj.options[index].text; returnval; } //修改选中的option functioneditOptions(selectID,newText,newValue){ varobj=document.getElementById(selectID); varindex=obj.selectedIndex;//序号,取当前选中选项的序号 obj.options[index]=newOption(newText,newValue); obj.options[index].selected=true; } //删除select functionremoveSelect(){ varselect=document.getElementById("select"); select.parentNode.removeChild(select); } </script> </head> <body> </body> </html>
以上所述是小编给大家分享的JavaScript操作select元素和option的实例代码,希望对大家有所帮助。