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 相关文章推荐
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
理解JSON:3分钟课程
Oct 28 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 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
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
python numpy 按行归一化的实例
2019/01/21 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
Django缓存系统实现过程解析
2019/08/02 Python
如何定义TensorFlow输入节点
2020/01/23 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
广州盈通面试题
2015/12/05 面试题
政法学院毕业生求职信
2014/02/28 职场文书
期末评语大全
2014/05/04 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript