JavaScript操作select元素和option的实例代码

时间：2021-05-26

废话不多说了，直接给大家贴代码，具体代码如下所示：

<!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="../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 添加选项optionfunction addOption(selectID,value,text) {//根据id查找对象， var obj = document.getElementById(selectID); obj.options.add(new Option(text, value)); //这个兼容IE与firefox }//删除所有选项optionfunction removeAll(selectID) {var obj = document.getElementById(selectID);obj.options.length = ;}//根据 index 值删除一个选项optionfunction removeOneByIndex(selectID,index) {var obj = document.getElementById(selectID);//index,要删除选项的序号，这里取当前选中选项的序号 //var index = obj.selectedIndex;//获取选中的选项的index;obj.options.remove(index);}//根据 value或者text值删除一个选项optionfunction 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;}//修改选中的optionfunction 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;}//删除selectfunction removeSelect(){var select = document.getElementById("select"); select.parentNode.removeChild(select); }</script></head><body></body></html>

以上所述是小编给大家分享的JavaScript操作select元素和option的实例代码，希望对大家有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章