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 相关文章推荐
Js基础学习资料
Nov 23 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
小程序实现分类页
Jul 12 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 Javascript
Nest.js 授权验证的方法示例
Feb 22 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网站提速三大“软”招
2006/10/09 PHP
快速开发一个PHP扩展图文教程
2008/12/12 PHP
php抓取页面与代码解析 推荐
2010/07/23 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
python的urllib模块显示下载进度示例
2014/01/17 Python
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
TensorFlow的权值更新方法
2018/06/14 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
研究生简历自我评价范文
2014/09/13 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
结婚十年感言
2015/07/31 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
Java 死锁解决方案
2022/05/11 Java/Android
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL