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