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;   

Jquery操作select

1.获取列表项中候选项的数目。

2.获得选中项的索引值。

3.获得当前选中项的值

4.设定选择值

5.设定选择项

...

   //得到select项的个数   
   jQuery.fn.size = function(){   
       return jQuery(this).get(0).options.length;   
   }   
   
   //获得选中项的索引   
   jQuery.fn.getSelectedIndex = function(){   
       return jQuery(this).get(0).selectedIndex;   
   }   
  
  //获得当前选中项的文本   
  jQuery.fn.getSelectedText = function(){   
      if(this.size() == 0) return "下拉框中无选项";   
      else{   
          var index = this.getSelectedIndex();         
          return jQuery(this).get(0).options[index].text;   
      }   
  }   
  
  //获得当前选中项的值   
  jQuery.fn.getSelectedValue = function(){   
      if(this.size() == 0)    
          return "下拉框中无选中值";   
         
      else 
          return jQuery(this).val();   
  }   
  
  //设置select中值为value的项为选中   
  jQuery.fn.setSelectedValue = function(value){   
      jQuery(this).get(0).value = value;   
  }   
  
  //设置select中文本为text的第一项被选中   
  jQuery.fn.setSelectedText = function(text)   
  {   
      var isExist = false;   
      var count = this.size();   
      for(var i=0;i<count;i++)   
      {   
          if(jQuery(this).get(0).options[i].text == text)   
          {   
              jQuery(this).get(0).options[i].selected = true;   
              isExist = true;   
              break;   
          }   
      }   
      if(!isExist)   
      {   
          alert("下拉框中不存在该项");   
      }   
  }   
  //设置选中指定索引项   
  jQuery.fn.setSelectedIndex = function(index)   
  {   
      var count = this.size();       
      if(index >= count || index < 0)   
      {   
          alert("选中项索引超出范围");   
      }   
      else 
      {   
          jQuery(this).get(0).selectedIndex = index;   
      }   
  }   
  //判断select项中是否存在值为value的项   
  jQuery.fn.isExistItem = function(value)   
  {   
      var isExist = false;   
      var count = this.size();   
      for(var i=0;i<count;i++)   
      {   
          if(jQuery(this).get(0).options[i].value == value)   
          {   
              isExist = true;   
              break;   
          }   
      }   
      return isExist;   
  }   
  //向select中添加一项,显示内容为text,值为value,如果该项值已存在,则提示   
  jQuery.fn.addOption = function(text,value)   
  {   
      if(this.isExistItem(value))   
      {   
          alert("待添加项的值已存在");   
      }   
      else 
      {   
          jQuery(this).get(0).options.add(new Option(text,value));   
      }   
  }   
  //删除select中值为value的项,如果该项不存在,则提示   
  jQuery.fn.removeItem = function(value)   
  {       
      if(this.isExistItem(value))   
      {   
          var count = this.size();           
          for(var i=0;i<count;i++)   
         {   
             if(jQuery(this).get(0).options[i].value == value)   
             {   
                 jQuery(this).get(0).remove(i);   
                 break;   
             }   
         }           
     }   
     else 
     {   
         alert("待删除的项不存在!");   
     }   
 }   
 //删除select中指定索引的项   
 jQuery.fn.removeIndex = function(index)   
 {   
     var count = this.size();   
     if(index >= count || index < 0)   
     {   
         alert("待删除项索引超出范围");   
     }   
     else 
     {   
         jQuery(this).get(0).remove(index);   
     }   
 }   
 //删除select中选定的项   
 jQuery.fn.removeSelected = function()   
 {   
     var index = this.getSelectedIndex();   
     this.removeIndex(index);   
 }   
 //清除select中的所有项   
 jQuery.fn.clearAll = function()   
 {   
     jQuery(this).get(0).options.length = 0;   
 } 

----------------------------------------
jQuery获取客户端控件select
一、 获取select中选择的text与value相关的值
获取select选择的Text : var checkText=$("#slc1").find("option:selected").text();
获取select选择的value:var checkValue=$("#slc1").val();
获取select选择的索引值: var checkIndex=$("#slc1 ").get(0).selectedIndex;
获取select最大的索引值: var maxIndex=$("#slc1 option:last").attr("index");
二、  设置select选择的Text和Value
设置select索引值为1的项选中:$("#slc1 ").get(0).selectedIndex=1;  
设置select的value值为4的项选中: $("#slc1 ").val(4);  
设置select的Text值为JQuery的选中:
$("#slc1 option[text='jQuery']").attr("selected", true);
PS:特别要注意一下第三项的使用哦。看看JQuery的选择器功能是如此地强大呀!
三、 添加删除option项
为select追加一个Option(下拉项)
$("#slc2").append("<option value='"+i+"'>"+i+"</option>");
为select插入一个option(第一个位置)
$("#slc2").prepend("<option value='0'>请选择</option>");
PS: prepend 这是向所有匹配元素内部的开始处插入内容的最佳方式。
删除select中索引值最大option(最后一个)
$("#slc2 option:last").remove();
删除select中索引值为0的option(第一个)
$("#slc2 option[index='0']").remove();
删除select中value=’3’的option
$("#slc2 option[value='3']").remove();
删除select中text=’4’的option
$("#slc2 option[text='3']").remove();

---------------------------------------------------------

<script type="text/javascript">
 $(document).ready(function(){
  
  //添加“江苏”到下拉框的最后一位
  $('#add_to_last').click(function(){
     $('#select').append('<OPTION value="江苏">江苏</OPTION>');
  });
  
  //添加“安徽”到下拉框的第一位
  $('#add_to_first').click(function(){ 
   $('#select').prepend('<OPTION value="安徽">安徽</OPTION>'); 
  });

//获取当前的selectIndex(当前选中的下拉菜单的项目的索引)
  $('#get_select_index').click(function(){
   alert($('#select option:selected').attr("index"));
  });
  
  //移除下拉菜单最后一个项目
  $('#remove_last_option').click(function(){
   $('#select option:last').remove();
  });
  
  //移除除了第一个之外的所有选项
  $('#remove_all_option_except_first').click(function(){
   $('#select option').not(':first').remove();
  });
  
  //获取下拉菜单最大索引值
  $('#get_max_index').click(function(){
   var maxIndex=$("#select option:last").attr("index");
   alert(maxIndex);
  });
  
 });
</script>

<SELECT id="select" style="width:100px"> <OPTION selected>中国省份</OPTION></SELECT>  <p/>
<button id="add_to_last">添加江苏到最后一位</button><br/>
<button id="add_to_first">添加安徽到第一位</button><br/>
<button id="get_select_index">获取当前的selectIndex</button><br/>
<button id="remove_last_option">移除下拉菜单最后一个项目</button><br/>
<button id="remove_all_option_except_first">移除除了第一个之外的所有选项</button><br/>
<button id="get_max_index">获取下拉菜单最大索引值</button><br/>

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

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

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

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

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

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

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

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

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

  5. JavaScript操作select控件

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

  6. jQuery操作Select2控件

    Select2控件 将普通的select控件,转换为select2控件,通过select2()方法 将某个select控件,转换为select2 $('#selectId').select2({wid ...

  7. Jquery操作对控件的取值、赋值

    TEXTBOX: var str = $('#txt').val();  $('#txt').val("Set Lbl Value");   //文本框,文本区域: $(" ...

  8. jquery 操作服务端控件,select 控件

    <asp:DropDownList ID="ddl" runat="server"></asp:DropDownList> <se ...

  9. JavaScript 操作 COM 控件

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

  10. javascript,jquery 操作 dropdownlist ,select

    大家都知道,.NET中一些Web服务器控件解析并编译,最终被渲染的时候,其实是转化成了普通的html控件. 比如<asp:LinkButton>控件就被渲染成了<a>锚点控件, ...

最新文章

  1. BootStrap的下载及使用方法
  2. 解决SwipeRefreshLayout与Banner滑动冲突
  3. Python成长之路【第七篇】:Python基础之装饰器
  4. java属于面相_[Java教程]面相对象
  5. (王道408考研数据结构)第七章查找-第一节:查找的基本概念、平均查找长度
  6. Unix——学习《Unix环境高级编程》找不到“apue.h”方法
  7. 台积电5nm来了!谁会是第一个吃螃蟹的人
  8. linux c++ 函数效率,Linux C++程序进行性能分析工具gprof使用入门
  9. 第27课 数组的本质分析
  10. openCV之中值滤波均值滤波(及代码实现)
  11. 使用CSS制作图片相框以及图片放大旋转效果
  12. 【EXLIBRIS】#小词旮旯# 001 Lock
  13. 2018 Android 框架汇总(转)
  14. 【美港探案】百度Q2:需要重新定义
  15. STL全特化 偏特化 成员特化
  16. 【眼见为实】数据库并发问题 封锁协议 隔离级别
  17. 企业管理者谦虚_为什么谦虚是优秀开发者最重要的特征
  18. Linux环境安装python3报错:“HTTP Error 416 Requested Range Not Satisfiable 正在尝试其它镜像”的解决方法
  19. 服务器过关稳定靠谱有利于网站的运行
  20. 税收完税证明模板图片_税收完税证明模板下载_税收完税证明模板设计素材

热门文章

  1. Linux运维第一课----服务器硬件
  2. 数据结构与算法之队列
  3. 详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点
  4. Node.js 教程第五篇——request
  5. kolla-ansible解析
  6. 用存储过程DataFactory准备测试数据
  7. LAMP详细搭建步骤
  8. 2.软件架构设计:大型网站技术架构与业务架构融合之道 --- 架构的道与术
  9. 7.Shell 编程从入门到精通 --- 流编辑
  10. 22.TCP/IP 详解卷1 --- TCP 的坚持定时器