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
目录
相关文章
|
4月前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
44 7
|
4月前
|
JSON 前端开发 JavaScript
在JavaScript中,异步编程是一种处理非阻塞操作(如网络请求、文件读写等)的重要技术
【6月更文挑战第12天】JavaScript中的异步编程通过Promise和async/await处理非阻塞操作。Promise管理异步操作的三种状态,防止回调地狱,支持链式调用和并行处理。async/await是ES8引入的语法糖,使异步代码更像同步代码,提高可读性。两者结合使用能更高效地处理复杂异步场景。
35 3
|
4月前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
51 2
JavaScript基础-DOM操作:查找、创建、修改
|
3月前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
37 1
|
3月前
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
37 1
|
4月前
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
70 1
|
4月前
|
存储 前端开发 JavaScript
回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。
【6月更文挑战第27天】回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。它作为参数传递给其他函数,在特定条件满足或任务完成后被调用。例如,`asyncOperation`函数接受回调函数`handleResult`,模拟异步操作后,调用`handleResult`传递结果。这样,当异步任务完成时,`handleResult`负责处理结果。
29 1
|
4月前
|
存储 JavaScript 前端开发
JavaScript中的数组是核心数据结构,用于存储和操作序列数据
【6月更文挑战第22天】JavaScript中的数组是核心数据结构,用于存储和操作序列数据。创建数组可以使用字面量`[]`或`new Array()`。访问元素通过索引,如`myArray[0]`,修改同样如此。常见方法包括:`push()`添加元素至末尾,`pop()`移除末尾元素,`shift()`移除首元素,`unshift()`添加到开头,`join()`连接为字符串,`slice()`提取子数组,`splice()`进行删除、替换,`indexOf()`查找元素位置,`sort()`排序数组。还有其他如`reverse()`、`concat()`等方法。
126 2
|
4月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
4月前
|
JavaScript 前端开发
JS实现select框实现模糊搜索
JS实现select框实现模糊搜索