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

简介: 1 判断select选项中 是否存在Value="paraValue"的Item   2 向select选项中 加入一个Item   3 从select选项中 删除一个Item   4 删除select中选中的项   5 修改select选项中 value="p...

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
目录
相关文章
|
1月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
12 1
|
1月前
|
JavaScript 前端开发
如何使用 JavaScript 操作 DOM?
如何使用 JavaScript 操作 DOM?
13 0
|
1月前
|
移动开发 前端开发 JavaScript
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
|
2月前
|
JavaScript 数据处理
JS 取整,取余操作
JS 取整,取余操作
|
3月前
|
前端开发 JavaScript Java
【面试题】说说 JavaScript数组常见的操作 (20个)
【面试题】说说 JavaScript数组常见的操作 (20个)
|
3月前
|
存储 JavaScript
JS中数组的操作
JS中数组的操作
|
4月前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下 `innerHTML` 和 `textContent` 的区别。
JavaScript DOM 操作:解释一下 `innerHTML` 和 `textContent` 的区别。
42 1
|
1天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
8天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
12 0
|
8天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
11 4