Javascript、jQuery 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）

本文来自：http://www.cnblogs.com/zyh-nhy/archive/2007/08/08/847876.html

 

 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();

 

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

 

以下来自梦三秋：http://www.skygq.com/2010/12/24/jquery-process-select-demo/

<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/>