zoukankan      html  css  js  c++  java
  • Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)

    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
  • 相关阅读:
    activemq 高可用集群部署
    rabbitmq单机部署、集群部署、haproxy+keepalived 的高可用负载均衡环境搭建
    redis 单机部署、集群部署(主从同步+哨兵)
    zookeeper 单机部署、伪集群部署、集群部署
    IDEA 中调试 dubbo 出现 <dubbo:reference interface="" /> interface not allow null! 异常
    centos 安装 subversion1.8及更高版本
    mysql 两主一从环境搭建
    mysql 一主多从环境搭建
    springboot + post 中文乱码
    android:inputType参数类型说明
  • 原文地址:https://www.cnblogs.com/y0umer/p/3839421.html
Copyright © 2011-2022 走看看