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.设计源码 < ...
随机推荐
- grunt serve Fatal error: Port 35729 is already in use by another process.
y@y:~$ lsof | grunt y 0t0 TCP *: (LISTEN) Optimizin y 0t0 TCP *: (LISTEN) v8:Sweepe y 0t0 TCP *: (LI ...
- POJ3026 Borg Maze(最小生成树)
题目链接. 题目大意: 任意两点(点表示字母)可以连线,求使所有点连通,且权值和最小. 分析: 第一感觉使3维的BFS.但写着写着,发现不对. 应当用最小生成树解法.把每个字母(即A,或S)看成一个结 ...
- BZOJ1715: [Usaco2006 Dec]Wormholes 虫洞
1715: [Usaco2006 Dec]Wormholes 虫洞 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 475 Solved: 263[Sub ...
- at命令
在windows系统中,windows提供了计划任务这一功能,在控制面板 -> 性能与维护 -> 任务计划, 它的功能就是安排自动运行的任务. 通过'添加任务计划'的一步步引导,则可建立一 ...
- 【模拟】XMU 1054 Hacker
题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1054 题目大意: 多组数据,n=0结束.给定n(n<=1 000 000)和n个 ...
- Types of AOP
There are two distinct types of AOP: static and dynamic. The difference between them is really the p ...
- Git全解析之远程仓库交互
文章目录 1. Git全解析之远程仓库交互 1.1. 中央仓库的概念 1.2. 本地分支与远程分支 1.3. pull与fetch 1.4. 关于捐赠 Git全解析之远程仓库交互 中央仓库的概念 虽然 ...
- RELATED INTRODUCED
1.综合知识 RSS,IMDB 1.1什么是RSS? RSS(Really Simple Syndication)是一种描述和同步网站内容的格式,是目前使用最广泛的XML应用.RSS搭建了信息迅速传播 ...
- 字体在Android View中的输出 drawText
Canvas 作为绘制文本时,使用FontMetrics对象,计算位置的坐标. public static class FontMetrics { public flo ...
- 告诉你LTE-FDD与LTE-TDD的区别
[PConline 技术分析]移动早在去年已经拿下了TD-LTE的4G牌照,而中国联通与中国电信的FDD-LTE的牌照在近日正式拿下,而对于4G网络,有多少真正了解呢?接下来笔者就为大家解释一下4G的 ...