javaScript的select元素和option的相关操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--添加jquery-->
<script src="../Script/jQuery/jquery-1.6.2.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();
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;
; 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的相关操作的更多相关文章
- jquery的select元素和option的相关操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- select元素添加option的add()方法 | try{}catch{}
1.javascript中的select元素添加option使用add()方法 select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置 普通浏览器中,第二个参 ...
- 使用JavaScript获取select元素选中的value和text
示例代码如下(js直接写在了html里面,没有写在一个单独的外部文件中): <!DOCTYPE html> <html> <head> <meta name= ...
- jQuery获取Select元素
jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Se ...
- jquery关于Select元素的操作
jQuery获取Select元素,并选择的Text和Value: $("#select_id").change(function(){//code...}); ...
- select元素javascript常用操作 转
/*------------------------------------------------------ *作者:xieyu @ 2007-08-14 *语言:JavaScript *说明:s ...
- 仅Firefox中A元素包含Select时点击Select不能选择option
这是在使用京东的一个日期组件时碰到的bug,重现bug的代码精简如下 <!DOCTYPE HTML> <html> <head> <title> 仅Fi ...
- JavaScript向select下拉框中加入和删除元素
JavaScript向select下拉框中加入和删除元素 1.说明 a 利用append()方法向下拉框中加入元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...
- JavaScript向select下拉框中添加和删除元素
JavaScript向select下拉框中添加和删除元素 1.说明 a 利用append()方法向下拉框中添加元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...
随机推荐
- How Many Points of Intersection?
uva10790:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_prob ...
- 使用Java Applet在客户端解压缩，以及使用证书的意义
以前解压缩是用Java Applet在客户端解压缩,而且用户不知道这回事.但是现在Chrome不支持NP API了,所以不得不把Java去掉,然后在服务器里解压缩.风险在于,解压缩以后,传输到客户端的 ...
- Android 4.4 上实现透明导航栏和状态栏 Translucent system bar
Translucent system UI styling To get the most impact out of your content, you can now use new window ...
- 【HDOJ】3732 Ahui Writes Word
初看01背包,果断TLE.是因为n和C都比较大.但是vi和ci却很小,转化为多重背包. #include <cstdio> #include <cstring> ][]; ]; ...
- 《算法问题实战策略》-chaper7-穷举法
关于这一章节<算法实战策略>有一段概述问题,我认为对于编程人员来说非常有价值,故在这里进行如下的摘抄: 构想算法是很艰难的工作.相比大家都经历过,面对复杂的要求只是傻乎乎地盯着显示器,或者 ...
- Java中的不可变类
概念:不可变类的意思是创建该类的实例后,该实例的属性是不可改变的.java中的8个包装类和String类都是不可变类.所以不可变类并不是指该类是被final修饰的,而是指该类的属性是被final修饰的 ...
- java笔记13之成员变量与局部变量
成员变量和局部变量的区别 1在类中的位置不同 局部变量:类的方法体内 成员变量:类的方法之外 2内存的不同位置 局部变量:在栈内存中 成员位置:在堆内存 3生命周期不同 局部变量:随着方法的调用而存在 ...
- struts2，hibernate，spring整合笔记(3)
struts2,hibernate,spring整合笔记(1) struts2,hibernate,spring整合笔记(2) 配好struts和hibernate就要开始spring了 老规矩,还是 ...
- 开源消息中间件DotNetMQ
由于这个开源项目对我这种中间件菜鸟很有帮助,因此,我将官方的说明文档翻译如下: Introduction In this article, I will introduce a new and ind ...
- solr error logs org.apache.solr.common.SolrException: ERROR: [doc=17] unknown field alias
在solr中 添加新的索引词语时,报如标题所示错误,指定是插入的字段没有在solr索引字段里 可以修改 solr安装目录/solr/conf 目录下的 schema.xml 在此xml文件内加入所需字 ...