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 各浏览器的 Javascript 效率对比
Jan 23 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
Node.js学习入门
Jan 03 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
浅谈TypeScript的类型保护机制
Feb 23 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处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
smarty内置函数section的用法
2015/01/22 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
Python 正则表达式的高级用法
2016/12/04 Python
python中的字典操作及字典函数
2018/01/03 Python
Python操作mongodb的9个步骤
2018/06/04 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
Python创建或生成列表的操作方法
2019/06/19 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
加多宝凉茶广告词
2014/03/18 职场文书
环保倡议书300字
2014/05/15 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
投标承诺函范文
2015/01/21 职场文书
会议欢迎词范文
2015/01/27 职场文书
教师节班会主持词
2015/07/06 职场文书
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python