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 表单规则集合对象
Jul 21 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
基于Express框架使用POST传递Form数据
Aug 10 Javascript
让你30分钟快速掌握vue3教程
Oct 26 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 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
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP中的self关键字详解
2019/06/23 PHP
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
python读取几个G的csv文件方法
2019/01/07 Python
查看keras的默认backend实现方式
2020/06/19 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
大学生实习期自我评价范文
2013/10/03 职场文书
工程师求职简历的自我评价分享
2013/10/10 职场文书
产品销售员岗位职责
2013/12/18 职场文书
机电一体化职业规划书
2014/01/07 职场文书
暑期研修感言
2014/02/17 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
高三学生评语大全
2014/04/25 职场文书
建筑投标担保书
2014/05/20 职场文书
趣味运动会广播稿
2014/09/13 职场文书
爱心捐款活动总结
2015/05/09 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL