JavaScript操作select元素和option的实例代码
废话不多说了，直接给大家贴代码，具体代码如下所示：
<!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 添加选项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的实例代码，希望对大家有所帮助。
相关推荐
-
JS & JQuery 动态添加 select option
今天有朋友问我一个关于在<select>里动态添加option问题,一开始以为是JS那里动态添加,所以用了JS动态添加option的方法,但你那里是用JQuery的,所以才会一直出错,下面记下在JS和JQuery里添加option的区别. JS: var selid = document.getElementById("sltid"); for(var i=0; i<10;i++){ //循环添加多个值 sid.option[i] = new Option(i,i);
-
JavaScript实现向select下拉框中添加和删除元素的方法
本文实例讲述了JavaScript实现向select下拉框中添加和删除元素的方法.分享给大家供大家参考,具体如下: 1.说明 a. 利用append()方法向下拉框中添加元素 b. 利用remove()方法移除下拉框中最后一个元素 2.实例源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition
-
javascript操作select元素实例分析
本文实例讲述了javascript操作select元素的用法.分享给大家供大家参考.具体分析如下: 这里熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮. 当选择select中某一项时改变其文字,当select中所有项的文字都改变后,重新恢复它们. 当按下submit时关闭窗口本身,代码如下: <!DOCTYPE html> <html> <head> <title>duang for se
-
JavaScript实现将数组数据添加到Select下拉框的方法
本文实例讲述了JavaScript实现将数组数据添加到Select下拉框的方法.分享给大家供大家参考.具体如下: 这里演示将数组中的数据添加到Select下拉菜单中的效果,当你点击下拉框的时候,就动态加载了数据,更换Select内容的时候,直接替换数组中的内容就可以了.适合前端设计者实现前台的部分本地化脚本操作. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-array-add-select-data-codes/ 具体代码如下: <!D
-
使用js对select动态添加和删除OPTION示例代码
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态删除select中的所有options: document.getElementById("ddlResourceType").options.length=0; 动态删除select中的某一项option: document.getElementById("ddlResourc
-
js 获取当前select元素值的代码
1.如果 select 元素下的所有 option 元素均没有指定 selected 属性,会默认选中第一个. 2.可以通过 select.selectedIndex 获取到选中的 option 元素的索引. 3.可以通过 select.options[select.selectedIndex] 获取到选中的 option 元素. 4.option 元素 <option selected="selected" value="value3">text3&l
-
JS动态添加与删除select中的Option对象(示例代码)
如下所示: 复制代码 代码如下: //动态删除select中的所有options: function delAllOptions(){ document.getElementById("user_dm").options.length=0; } //动态删除select中的某一项option: function delOneOption(index){ document.getElementById("user_dm").o
-
js获取当前select 元素值的代码
如果 select 元素下的所有 option 元素均没有指定 selected 属性,会默认选中第一个. 可以通过 select.selectedIndex 获取到选中的 option 元素的索引. 可以通过 select.options[select.selectedIndex] 获取到选中的 option 元素. option 元素 <option selected="selected" value="value3">text3</optio
-
获取select元素被选中的文本内容的js代码
复制代码 代码如下: var sel=document.getElementById(id);//select元素的id var index=sel.selectedIndex;//获取被选中的option的索引 var textsel= sel.options[index].text;//获取相应的option的内容
-
JS对HTML标签select的获取、添加、删除操作
复制代码 代码如下: <SELECT NAME="aaa" SIZE="" style="width:200px" > <OPTION VALUE="">(空)</OPTION> <OPTION VALUE="1">1</OPTION> </SELECT> 复制代码 代码如下: //获得html控件 var select = docum
-
JavaScript Select和Option列表元素上下左右移动
作者 马嘉楠 New Document var currentSel = null; function move(){ if(arguments.length==1){ moveUp(arguments[0]); }else if(arguments.length==2){ moveRight(arguments[0],arguments[1]); } } function moveUp(direction){ if(currentSel == null) return; var index =
-
js querySelector和getElementById通过id获取元素的区别
这是sina同事xiaoniu发现的,如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="02E503E2A1C011CFC85B7B701A0677EC0900000000000001"></div> <script> var str = '02E5
-
extjs 列表框(multiselect)的动态添加列表项的方法
因为它这个是创建时自动加载的ArrayStore(关键字是:data: ds),没有动态增加的示例,但我们的项目需要有三个列表框,并且后两个的内容要根据第一个列表框内容动态的加载,因此要在选择第一个列表框的内容时,动态填充后两个的内容.我比较佩服exjts的示例写作人员,这些应该在示例中体现的功能,他们都没有写到,包括之前的2.2版本的示例,网上也没有搜索到,害我找了一天如何动态控制列表数据的功能.首先说明一下,我的方法也不是官方的方法,只是自己灵机一动想到的,下面是动态增加列表项的方法. 在方