js动态改变select选择变更option的index值示例


Posted in Javascript onJuly 10, 2014
document.getElementById("louyuming").options[0].selected=true;

function jsSelectIsExitItem(objSelect, objItemValue) { 
var isExit = false; 
for (var i = 0; i < objSelect.options.length; i++) { 
if (objSelect.options[i].value == objItemValue) { 
isExit = true; 
break; 
} 
} 
return isExit; 
}

Javascript 操作select是表单中常见的一种,今天删除多个select值的时候出现了问题,搞了半天原来是索引引起的(即删除的时候要从索引大的开始删,然后再 删除索引小的,否则删除了索引小的后索引大的索引就变化了,再删除时就会出现问题--问题的关键是for循环是要从大到小,而不是常规的从0到 length)

// 4.删除select中选中的项 
function jsRemoveSelectedItemFromSelect(objSelect) { 
var length = objSelect.options.length - 1; 
for(var i = length; i >= 0; i--){ 
if(objSelect[i].selected == true){ 
objSelect.options[i] = null; 
} 
} 
}

1判断select选项中 是否存在Value="paraValue"的Item
2向select选项中 加入一个Item
3从select选项中 删除一个Item
4删除select中选中的项
5修改select选项中 value="paraValue"的text为"paraText"
6设置select中text="paraText"的第一个Item为选中
7设置select中value="paraValue"的Item为选中
8得到select的当前选中项的value
9得到select的当前选中项的text
10得到select的当前选中项的Index
11清空select的项

======================================================================

动态删除select中的所有options:

function deleteAllOptions(sel){ 
sel.options.length=0; 
}

动态删除select中的某一项option:

function deleteOption(sel,indx){ 
sel.options.remove(indx); 
}

动态添加select中的项option:

function addOption(sel,text,value){ 
sel.options.add(new Option(text,value)); 
}

上面在IE和FireFox都能测试成功,希望以后可以用上。

===========================================

js 代码

// 1.判断select选项中 是否存在Value="paraValue"的Item 
function jsSelectIsExitItem(objSelect, objItemValue) { 
var isExit = false; 
for (var i = 0; i < objSelect.options.length; i++) { 
if (objSelect.options[i].value == objItemValue) { 
isExit = true; 
break; 
} 
} 
return isExit; 
} 

// 2.向select选项中 加入一个Item 
function jsAddItemToSelect(objSelect, objItemText, objItemValue) { 
//判断是否存在 
if (jsSelectIsExitItem(objSelect, objItemValue)) { 
alert("该Item的Value值已经存在"); 
} else { 
var varItem = new Option(objItemText, objItemValue); 
objSelect.options.add(varItem); 
alert("成功加入"); 
} 
} 

// 3.从select选项中 删除一个Item 
function jsRemoveItemFromSelect(objSelect, objItemValue) { 
//判断是否存在 
if (jsSelectIsExitItem(objSelect, objItemValue)) { 
for (var i = 0; i < objSelect.options.length; i++) { 
if (objSelect.options[i].value == objItemValue) { 
objSelect.options.remove(i); 
break; 
} 
} 
alert("成功删除"); 
} else { 
alert("该select中 不存在该项"); 
} 
} 


// 4.删除select中选中的项 
function jsRemoveSelectedItemFromSelect(objSelect) { 
var length = objSelect.options.length - 1; 
for(var i = length; i >= 0; i--){ 
if(objSelect[i].selected == true){ 
objSelect.options[i] = null; 
} 
} 
} 

// 5.修改select选项中 value="paraValue"的text为"paraText" 
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) { 
//判断是否存在 
if (jsSelectIsExitItem(objSelect, objItemValue)) { 
for (var i = 0; i < objSelect.options.length; i++) { 
if (objSelect.options[i].value == objItemValue) { 
objSelect.options[i].text = objItemText; 
break; 
} 
} 
alert("成功修改"); 
} else { 
alert("该select中 不存在该项"); 
} 
} 

// 6.设置select中text="paraText"的第一个Item为选中 
function jsSelectItemByValue(objSelect, objItemText) { 
//判断是否存在 
var isExit = false; 
for (var i = 0; i < objSelect.options.length; i++) { 
if (objSelect.options[i].text == objItemText) { 
objSelect.options[i].selected = true; 
isExit = true; 
break; 
} 
} 
//Show出结果 
if (isExit) { 
alert("成功选中"); 
} else { 
alert("该select中 不存在该项"); 
} 
} 

// 7.设置select中value="paraValue"的Item为选中 
objSelect.value = objItemValue; 

// 8.得到select的当前选中项的value 
var currSelectValue = objSelect.value; 

// 9.得到select的当前选中项的text 
var currSelectText = objSelect.options[document.all.objSelect.selectedIndex].text; 

// 10.得到select的当前选中项的Index 
var currSelectIndex = objSelect.selectedIndex; 

// 11.清空select的项 
objSelect.options.length = 0;

整个实例的完整代码如下:

<!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">
<!--
// Author: i@lxl.cn
// Modify: i@cnlei.com
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
var oOption=new Option(arguments[i],arguments[i]);
document.getElementById("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>
</body>
</html>
Javascript 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
vue-test-utils初使用详解
May 23 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 #Javascript
js确认删除对话框适用于a标签及submit
Jul 10 #Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 #Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 #Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 #Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 #Javascript
js数组与字符串的相互转换方法
Jul 09 #Javascript
You might like
用PHP实现图象锐化代码
2007/06/14 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP7新特性
2021/03/09 PHP
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
基于python编写的微博应用
2014/10/17 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
python绘制直方图和密度图的实例
2019/07/08 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
进修护士自我鉴定
2013/10/14 职场文书
三下乡活动方案
2014/01/31 职场文书
教师校本培训方案
2014/02/26 职场文书
股东授权委托书范文
2014/09/13 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
2014教师年度工作总结
2014/11/10 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android