js 操作select和option常用代码整理


Posted in Javascript onDecember 13, 2012

1、获取选中select的value和text,html代码如下

<select id="mySelect"> 
<option value="1">one</option> 
<option value="2">two</option> 
<option value="3">three</option> 
</select>

则可通过以下script代码s来获取选中的value和text
$("#mySelect").val(); //获取选中记录的value值 
$("#mySelect option:selected").text(); //获取选中记录的text值

2、运用new Option("文本","值")方法添加选项option
var obj = document.getElementById("mySelect");obj.add(new Option("4","4"));

3、删除所有选项option
var obj = document.getElementById("mySelect");obj.options.length = 0;

4、删除选中选项option
var obj = document.getElementById("mySelect");var index = obj.selectedIndex;obj.options.remove(index);

5、修改选中选项option
var obj = document.getElementById("mySelect"); 
var index = obj.selectedIndex; 
obj.options[index] = new Option("three",3); //更改对应的值 
obj.options[index].selected = true; //保持选中状态

6、删除select
var obj = document.getElementById("mySelect"); 
obj.parentNode.removeChild(obj); //移除当前对象

7、select选择的响应事件
$("#mySelect").change(function(){ //添加所需要执行的操作代码})
1.动态创建select
function createSelect(){ 
var mySelect = document.createElement_x("select"); 
mySelect.id = "mySelect"; 
document.body.appendChild(mySelect); 
}

2.添加选项option
function addOption(){ 
//根据id查找对象, 
var obj=document.getElementByIdx_x('mySelect'); 
//添加一个选项 
obj.add(new Option("文本","值")); //这个只能在IE中有效 
obj.options.add(new Option("text","value")); //这个兼容IE与firefox 
}

3.删除所有选项option
function removeAll(){ 
var obj=document.getElementByIdx_x('mySelect'); 
obj.options.length=0; 
}

4.删除一个选项option
function removeOne(){ 
var obj=document.getElementByIdx_x('mySelect'); 
//index,要删除选项的序号,这里取当前选中选项的序号 
var index=obj.selectedIndex; 
obj.options.remove(index); 
}

5.获得选项option的值
var obj=document.getElementByIdx_x('mySelect'); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index].value;

6.获得选项option的文本
var obj=document.getElementByIdx_x('mySelect'); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index].text;

7.修改选项option
var obj=document.getElementByIdx_x('mySelect'); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index]=new Option("新文本","新值");

8.删除select
function removeSelect(){ 
var mySelect = document.getElementByIdx_x("mySelect"); 
mySelect.parentNode.removeChild(mySelect); 
}

整个实例的完整代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html"> 
<head> 
<script language=JavaScript> 
function $(id) 
{ 
return document.getElementByIdx_x(id) 
} 
function show() 
{ 
var selectObj=$("area") 
var myOption=document.createElement_x("option") 
myOption.setAttribute("value","10") 
myOption.appendChild(document.createTextNode("上海")) 
var myOption1=document.createElement_x("option") 
myOption1.setAttribute("value","100") 
myOption1.appendChild(document.createTextNode("南京")) 
selectObj.appendChild(myOption) 
selectObj.appendChild(myOption1) 
} 
function choice() 
{ 
var index=$("area").selectedIndex; 
var val=$("area").options[index].getAttribute("value") 
if(val==10) 
{ 
var i=$("context").childNodes.length-1; 
var remobj=$("context").childNodes[i]; 
remobj.removeNode(true) 
var sh=document.createElement_x("select") 
sh.add(new Option("浦东新区","101")) 
sh.add(new Option("黄浦区","102")) 
sh.add(new Option("徐汇区","103")) 
sh.add(new Option("普陀区","104")) 
$("context").appendChild(sh) 
} 
if(val==100) 
{ 
var i=$("context").childNodes.length-1; 
var remobj=$("context").childNodes[i]; 
remobj.removeNode(true) 
var nj=document.createElement_x("select") 
nj.add(new Option("玄武区","201")) 
nj.add(new Option("白下区","202")) 
nj.add(new Option("下关区","203")) 
nj.add(new Option("栖霞区","204")) 
$("context").appendChild(nj) 
} 
} 
function calc() 
{ 
var x=$("context").childNodes.length-1; 
alert(x) 
} 
function remove() 
{ 
var i=$("context").childNodes.length-1; 
var remobj=$("context").childNodes[i]; 
remobj.removeNode(true) 
} 
</script> 
<body> 
<div id="context"> 
<select id="area" onchange="choice()"> 
</select> 
</div> 
<input type=button value="显示" onclick="show()"> 
<input type=button value="计算结点" onclick="calc()"> 
<input type=button value="删除" onclick="remove()"> 
</body> 
</html>

改进版:在select中添加、修改、删除option元素
function watch_ini(){ // 初始 
for(var i=0; i<arguments.length; i++){ 
var word = document.createElement_x("OPTION"); 
word.text = arguments[i]; 
watch.keywords.add(word); // watch. is form name 
} 
} 
function watch_add(f){ // 增加 
var word = document.createElement_x("OPTION"); 
word.text = f.word.value; 
f.keywords.add(word); 
}

但上述 add() 方法只在IE下有效,为兼容FF和Opera,对上述代码进行了一下改进,改动后代码如下:
function watch_ini(){ // 初始 
for(var i=0; i<arguments.length; i++){ 
var oOption=new Option(arguments[i],arguments[i]); 
document.getElementByIdx_x("MySelect")[i]=oOption; 
} 
} 
function watch_add(f){ // 增加 
var oOption=new Option(f.word.value,f.word.value); 
f.keywords[f.keywords.length]=oOption; 
}

整个实例的完整代码如下
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> 
<html> 
<head> 
<title>javascript select options text value</title> 
<meta name="keywords" content="javascript select options text value add modify delete set"> 
<meta name="description" content="javascript select options text value add modify delete set"> 
<script language="javascript"> 
<!-- 
function watch_ini(){ // 初始 
for(var i=0; i<arguments.length; i++){ 
var oOption=new Option(arguments[i],arguments[i]); 
document.getElementByIdx_x("MySelect")[i]=oOption; 
} 
} 
function watch_add(f){ // 增加 
var oOption=new Option(f.word.value,f.word.value); 
f.keywords[f.keywords.length]=oOption; 
} 
function watch_sel(f){ // 编辑 
f.word.value = f.keywords[f.keywords.selectedIndex].text; 
} 
function watch_mod(f){ // 修改 
f.keywords[f.keywords.selectedIndex].text = f.word.value; 
} 
function watch_del(f){ // 删除 
f.keywords.remove(f.keywords.selectedIndex); 
} 
function watch_set(f){ // 保存 
var set = ""; 
for(var i=0; i<f.keywords.length; i++){ 
set += f.keywords[i].text + ";"; 
} 
confirm(set); 
} 
//--> 
</script> 
</head> 
<body> 
<form name="watch" method="post" action=""> 
<select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br> 
<script language="javascript"> 
<!-- 
watch_ini("我","你","??","他","她","它","尔"); // 初始关键词 
//--> 
</script> 
<input type="text" name="word" /><br /> 
<input type="button" value="增加" onclick="watch_add(this.form);" /> 
<input type="button" value="修改" onclick="watch_mod(this.form);" /> 
<input type="button" value="删除" onclick="watch_del(this.form);" /> 
<input type="button" value="保存" onclick="watch_set(this.form);" /> 
</form>

用一个字符串创建一个数组方法:
<script language="javascript"> 
</body> 
</html> 
<script> 
function spli(){ 
datastr="2,2,3,5,6,6"; 
var str= new Array(); 
str=datastr.split(","); 
for (i=0;i<str.length ;i++ ) 
{ document.write(str[i]+"<br/>"); } 
} 
spli(); 
</script

今天调试了一段js,在ie上运行良好,在火狐上调试出现错误,查资料发现
obj.add(new Option("文本","值")); //这个只能在IE中有效 
obj.options.add(new Option("text","value")); //这个兼容IE与firefox

因为这段代码,在网上查资料收藏了这篇文章,实时的温故js
共勉!
Javascript 相关文章推荐
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
vue实现井字棋游戏
Sep 29 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 #Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 #Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 #Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 #Javascript
javaScript复制功能调用实现方案
Dec 13 #Javascript
js遍历td tr等html元素
Dec 13 #Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 #Javascript
You might like
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
给初学PHP的5个入手程序
2006/11/23 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
vue实现引入本地json的方法分析
2018/07/12 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
python3.5基于TCP实现文件传输
2020/03/20 Python
python实现简单日期工具类
2019/04/24 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
python基础教程之while循环
2019/08/14 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
django使用channels实现通信的示例
2020/10/19 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
家长给小学生的评语
2014/01/30 职场文书
运动会通讯稿150字
2014/02/15 职场文书
电力安全事故反思
2014/04/27 职场文书
廉洁教育学习材料
2014/05/19 职场文书
社区志愿者培训方案
2014/06/10 职场文书
企业务虚会发言材料
2014/10/20 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL