废话不多说了，直接给大家贴代码，具体代码如下所示：
<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <title></title> <!--添加jquery--> <script src="https://www.jb51.net/Script/jQuery/jquery-...min.js" type="text/javascript"></script> <script type="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的元素 function createSelect(element, id) { var select = document.createElement(element); select.id = id; document.body.appendChild(select); } //根据select的id 添加选项option function addOption(selectID,value,text) { //根据id查找对象， var obj = document.getElementById(selectID); obj.options.add(new Option(text, value)); //这个兼容IE与firefox } //删除所有选项option function removeAll(selectID) { var obj = document.getElementById(selectID); obj.options.length = ; } //根据 index 值删除一个选项option function removeOneByIndex(selectID,index) { var obj = document.getElementById(selectID); //index,要删除选项的序号，这里取当前选中选项的序号 //var index = obj.selectedIndex;//获取选中的选项的index; obj.options.remove(index); } //根据 value或者text值删除一个选项option function removeOneByObj(selectID, textOrValue) { var obj = document.getElementById(selectID); //index,要删除选项的序号，这里取当前选中选项的序号 //var index = obj.selectedIndex;//获取选中的选项的index; for (var i = ; i < obj.options.length; i++) { if (obj.options[i].innerHTML == textOrValue || obj.options[i].value == textOrValue) { obj.options.remove(i); break; } } } //获得一个Option Value； function getOptionValue(selectID){ var obj = document.getElementById(selectID); var index=obj.selectedIndex; //序号，取当前选中选项的序号 var val = obj.options[index].value; return val; } //获得一个option Text; function getOptionText(selectID) { var obj = document.getElementById(selectID); var index=obj.selectedIndex; //序号，取当前选中选项的序号 var val = obj.options[index].text; return val; } //修改选中的option function editOptions(selectID,newText,newValue) { var obj = document.getElementById(selectID); var index=obj.selectedIndex; //序号，取当前选中选项的序号 obj.options[index] = new Option(newText, newValue); obj.options[index].selected = true; } //删除select function removeSelect(){ var select = document.getElementById("select"); select.parentNode.removeChild(select); } </script> </head> <body> </body> </html>
以上所述是小编给大家分享的JavaScript操作select元素和option的实例代码，希望对大家有所帮助。
您可能感兴趣的文章: