`
chengyue2007
  • 浏览: 1488748 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

Js操作Select大全

 
阅读更多

http://www.cnblogs.com/Herist/archive/2007/09/24/903890.html

 

判断select选项中 是否存在Value = " paraValue " 的Item 
向select选项中 加入一个Item 
从select选项中 删除一个Item 
删除select中选中的项 
修改select选项中 value
= " paraValue " 的text为 " paraText "  
设置select中text
= " paraText " 的第一个Item为选中 
设置select中value
= " paraValue " 的Item为选中 
得到select的当前选中项的value 
得到select的当前选中项的text 
得到select的当前选中项的Index 
清空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

分享到:
评论

相关推荐

    JavaScript操作select大全

    ### JavaScript操作select大全 在网页开发中,`&lt;select&gt;`元素是用于创建下拉列表的常用HTML标签之一。本文档提供了详细的JavaScript操作`&lt;select&gt;`元素的方法,包括判断选项是否被选中、增删改选项及其属性等实用...

    Js操作Select大全(取值、设置选中等等)

    ### Js操作Select大全知识点详解 #### 一、概述 JavaScript(简称JS)是网页开发中不可或缺的一部分,尤其在处理用户界面交互方面具有重要作用。本文档将详细介绍如何利用原生JavaScript和jQuery来操作`&lt;select&gt;`...

    js操作select大全 转

    根据给定的信息,本文将对JavaScript操作`&lt;select&gt;`元素的方法进行详细介绍,这些方法涵盖了创建、选择、删除选项等操作。 ### 1. 检查`&lt;select&gt;`元素是否存在值为`paraValue`的项 ```javascript function ...

    Js操作Select大全.doc

    以上是JavaScript操作`&lt;select&gt;`标签的一些基本方法。在实际开发中,这些功能可能会作为更复杂交互的基础,例如动态加载数据、响应用户事件等。了解并熟练掌握这些操作,对于提升网页的交互性和用户体验至关重要。

    Javascript 操作select控件大全

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

    js操作select控件大全

    js 操作 select 控件大全是 JavaScript 中对 select 控件的各种操作的集合,包括新增、修改、删除、选中、清空、判断存在等多种操作。下面将对这些操作进行详细的介绍和讲解。 一、 判断 select 选项中是否存在 ...

    js 操作select和option

    &lt;title&gt;JS 操作 Select 和 Option &lt;script language="JavaScript"&gt; function $(id) { return document.getElementById(id); } function show() { var selectObj = $("area"); var myOption = document....

    jquery操作select大全

    ### jQuery操作Select大全知识点详解 #### 1. 概述 jQuery操作Select大全主要包含了一系列使用jQuery操作select下拉列表的方法和实例。在Web开发过程中,动态地与select元素进行交互是常见的需求,jQuery为此提供...

    js操作select相关方法

    以上代码展示了JavaScript操作`select`元素的一些常见方法。首先,`jsSelectIsExitItem`函数用于检查`select`中是否存在指定`value`的选项。如果存在,它将返回`true`,否则返回`false`。接着,`jsAddItemToSelect`...

    javascript 操作表单select的常用步骤

    ### JavaScript操作表单Select元素的常用步骤 在Web开发中,`&lt;select&gt;`标签用于创建一个下拉列表供用户选择选项。使用JavaScript可以方便地控制这些下拉列表的行为,例如添加、删除或修改选项等。下面详细介绍如何...

    html最全的js javascript操作select 下拉框

    根据给定的文件标题、描述、标签以及部分内容,本文将深入解析HTML中使用JavaScript操作`&lt;select&gt;`下拉框的全面方法。`&lt;select&gt;`元素是网页表单中用于创建下拉列表的关键部分,而通过JavaScript,我们可以动态地添加...

    javascript操作Select标记中options集合

    这篇博客“javascript操作Select标记中options集合”深入探讨了如何利用JavaScript动态地管理和操作这些选项。以下是关于这个主题的一些关键知识点: 1. **DOM操作**:在JavaScript中,我们可以使用DOM(Document ...

    Javascript 操作select下拉框

    ### JavaScript 操作 Select 下拉框的关键知识点 在 Web 开发中,`&lt;select&gt;` 元素用于创建下拉列表(或选择框)。这些选择框在用户界面中非常常见,可以用来收集用户输入的信息,比如让用户从一系列选项中选择一个...

    select2.mim.js and select2.min.css.zip

    `select2.min.js`是JavaScript文件的最小化版本,用于减少页面加载时间;而`select2.min.css`则是CSS文件的最小化版本,负责样式呈现。这两个文件应当在HTML页面中正确引用,以便Select2库正常工作。 在实际应用中...

    JavaScript操作select&&table

    ### JavaScript操作select&&table #### 一、JavaScript操作Select元素 在Web开发中,`&lt;select&gt;`元素用于创建下拉列表。通过JavaScript可以对这些下拉列表进行动态操作,包括添加选项、删除选项、获取选中的值等。...

    Javascript操作Select和Option

    Javascript操作Select和Option 一个网页 挺全的

    js之Select用法

    2. **通过JavaScript操作`select`元素** - 获取`select`元素:可以使用`document.getElementById('mySelect')`或`document.querySelector('#mySelect')`来获取`select`元素。 - 添加/删除选项: - 添加选项:`...

Global site tag (gtag.js) - Google Analytics