Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]


Posted in Javascript onSeptember 26, 2008

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为选中
document.all.objSelect.value = objItemValue;

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

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

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

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

Javascript 相关文章推荐
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
web 页面分页打印的实现
Jun 22 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
jquery css实现流程进度条
Mar 26 jQuery
JavaScript async/await原理及实例解析
Dec 02 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 Javascript
验证用户是否修改过页面的数据的实现方法
Sep 26 #Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 #Javascript
js每次Title显示不同的名言
Sep 25 #Javascript
Js动态创建div
Sep 25 #Javascript
自己开发Dojo的建议框架
Sep 24 #Javascript
Discuz! 6.1_jQuery兼容问题
Sep 23 #Javascript
javascript的trim,ltrim,rtrim自定义函数
Sep 21 #Javascript
You might like
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
javascript修改IMG标签的src问题
2014/03/28 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
JS表的模拟方法
2015/02/05 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
Pandas 数据处理,数据清洗详解
2018/07/10 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
python实现加密的方式总结
2020/01/19 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
推荐信格式范文
2014/05/09 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
领导干部学习心得体会
2016/01/23 职场文书