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的项

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;

转载于:https://www.cnblogs.com/jcomet/archive/2008/07/14/1242793.html

Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)...相关推荐

  1. 转 JavaScript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)...

    收藏一下 1.判断select选项中 是否存在Value="paraValue"的Item 2.向select选项中 加入一个Item 3.从select选项中 删除一个Item ...

  2. JavaScript操作select控件

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  3. JavaScript 操作 COM 控件

    目标:用JavaScript 脚本代码调用COM控件,实现基本功能操作: 1.定义及初始化COM控件: 2.调用COM接口: 3.注册COM事件并实现事件调用. 1. 定义及初始化COM控件      ...

  4. javascript操作office控件

    //以下变量为JS公共变量 var TANGER_OCX_bDocOpen = false; var TANGER_OCX_filename;//文件名称 var filetype="&qu ...

  5. jQuery操作select控件取值和设值

    1.级联select的操作,后一个select的值随着前一个select选中值变化 $(".select_A").change(function(){$(".select ...

  6. Jquery获取select 控件的change事件时选中的值

    HTML代码如下: <div class="col-sm-9 col-xs-12"><select id="groupid" class=&q ...

  7. html下拉列表插件,js+CSS实现模拟华丽的select控件下拉菜单效果

    本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个 ...

  8. 梅花雨做的一个日历 Javascript 页面脚本控件

    梅花雨做的一个日历 Javascript 页面脚本控件 比较好用,背景颜色可以自己用替换的形式改 //------------------------------------------------- ...

  9. asp.net web 开发登录相关操作的控件LoginName、LoginStatus和LoginView控件使用详解

    http://book.51cto.com/art/200909/154039.htm http://book.51cto.com/art/200909/154041.htm ASP.NET提供了一套 ...

最新文章

  1. 手动部署OpenStack环境(三:OpenStack环境预配置)
  2. 单独使用 EHCache
  3. 几张图片总结我的2015年
  4. RedHat已更改其开源许可规则
  5. 我理解的 js 异步成长总结
  6. 程序员需要能show出来!
  7. python123第三章作业答案_swift playground类似的游戏
  8. 数据库流行度9月排行榜:Oracle 的老骥伏枥和 MongoDB 逆风飞扬
  9. UVA 12898 - And Or 与和或 (思路题)
  10. 特斯拉model3中控屏怎么关_对话特斯拉首席设计师Franz:设计为效率服务
  11. 华为平板 鸿蒙2.0,华为鸿蒙2.0支持型号有哪些
  12. Vue 单文件模板中覆盖引入库 CSS 样式
  13. 简单案例之人人网登录界面
  14. mysql周德伟课后答案_MySQL数据库技术-周德伟
  15. mybati-plus自定义sql异常Invalid bound statement (not found)封装的sql查询正常
  16. el表达试中三元用法
  17. Win10文件无法重命名
  18. Toshiba转换芯片-TC358778XBG:RGB转MIPI DSI芯片资料
  19. mysql ndb 关闭_MySQL NDB Cluster环境启动与关闭
  20. 怎么将红底照片用PS换成白底

热门文章

  1. Java笔记-spring-rabbitmq中使用@RabbitListener消费(手动确认,获header数据)
  2. 使用启动外部进程的方式解决there should be only one application object(使用qtwinmigrate中常出现)
  3. 系统架构师学习笔记-数据通信与计算机网络(二)
  4. MySQL入门之访问控制与安全
  5. python输出矩阵的行数_python查看矩阵的行列号以及维数方式
  6. centos8 装docker 问题
  7. java 用面向接口编程的方式开发打印机_Java“打印机”模型理解面向接口编程。实现接口定义类,接口实现类,核心“业务”类分离...
  8. node 获取表单数据 为空_像声明类型一样写表单——基础功能
  9. jquery 给类名元素添加行内样式_学Jquery的第一天
  10. 解决用Python对Sqlite进行数据更新比较慢的一种方法