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 this 的一些学习总结
Aug 31 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
js prototype深入理解及应用实例分析
Nov 25 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
简单的php文件上传(实例)
2013/10/27 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
php简单中奖算法(实例)
2017/08/15 PHP
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
python中的变量如何开辟内存
2018/06/26 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
中文系学生自荐信范文
2013/11/13 职场文书
财务部岗位职责
2013/11/19 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
科技之星事迹材料
2014/06/02 职场文书
明星员工获奖感言
2014/08/14 职场文书
生活小常识广播稿
2014/09/16 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
如何写好闭幕词
2019/04/02 职场文书
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python