`

select元素javascript常用操作(转)

阅读更多
/*------------------------------------------------------
 *说明:select元素javascript常用操作
 * 1.判断是否存在指定value的Item
 * 2.加入一个Item
 * 3.删除值为value的所有Item
 * 4.删除某一个index的选项
 * 5.更新第index项的value和text
 * 6.设置select中指定text的第一个Item为选中
 * 7.设置select中指定value的第一个Item为选中
 * 8.得到当前选中项的value
 * 9.得到当前选中项的index
 *  10.得到当前选中项的text
 * 11.清空所有选项
-------------------------------------------------------*/
//1.判断是否存在指定value的Item
function ExistValue(obj,value){
    for(var i=0;i<obj.options.length;i++){
        if(obj.options[i].value == value){
            return true;
        }
    }      
    return false;
}
//2.加入一个Item
function AddItem(obj,text,value){
 var varItem = new Option(text,value);
 obj.options.add(varItem);
}
//3.删除值为value的所有Item
function RemoveItems(obj,value){
 for(var i=0;i<obj.options.length;i++){
  if(obj.options[i].value == value){
   obj.remove(i);
  }
 }        
}
//4.删除某一个index的选项
function RemoveItem(obj,index){
 obj.remove(index);
}

//5.更新第index项的value和text
function UpdateItem(obj,index,value,text){
 obj.options[index].value = value;
 obj.options[index].text = text;
}
        
//6.设置select中指定text的第一个Item为选中
function SelectItemByText(obj,text){    
    var isExit = false;
    for(var i=0;i<obj.options.length;i++){
        if(obj.options[i].text == text){
            obj.options[i].selected = true;
            return true;
        }
    }
 return false;
 
}
//7.设置select中指定value的第一个Item为选中
function SelectItemByValue(obj,value){    
    var isExit = false;
    for(var i=0;i<obj.options.length;i++){
        if(obj.options[i].value == value){
            obj.options[i].selected = true;
            return true;
        }
    }
 return false;
 
}
//8.得到当前选中项的value,index,text
function GetValue(obj){
 return obj.value; 
}
//9.得到当前选中项的index
function GetIndex(obj){
 return obj.selectedIndex; 
}
//10.得到当前选中项的text
function GetText(obj){
 return obj.options[obj.selectedIndex].text;
}
//11.清空所有选项
function Clear(obj){
 obj.options.length = 0; 
}

 

分享到:
评论

相关推荐

    select元素javascript常用操作

    以上就是针对`&lt;select&gt;`元素在JavaScript中的一些常用操作方法,这些方法可以大大增强页面的动态性和交互性,提高用户的使用体验。在实际开发中,灵活运用这些方法可以实现更多复杂的功能,如动态加载数据、条件过滤...

    javascript 操作表单select的常用步骤

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

    JavaScript操作select大全

    本文档提供了详细的JavaScript操作`&lt;select&gt;`元素的方法,包括判断选项是否被选中、增删改选项及其属性等实用功能。下面将详细介绍这些方法。 #### 一、判断是否选中 **功能描述:** 判断指定值的`&lt;option&gt;`元素...

    javascript常用操作技巧

    本文将基于提供的文件信息,深入解析一系列JavaScript常用操作技巧及其应用场景。 #### 1. 屏蔽鼠标右键 - **代码示例**: ```javascript oncontextmenu="window.event.returnValue=false" ``` - **解释**:...

    JavaScript常用语句精选

    ### JavaScript常用语句精选 #### 一、概述 在网页开发中,JavaScript 是一种非常重要的客户端脚本语言,被广泛应用于交互式网站的设计与实现。本文档中的代码片段虽然较为特殊且不易理解,但其中涉及到了一些关键...

    多选select组件 涉及的所有常用操作

    本篇文章将探讨“多选select组件涉及的所有常用操作”,并结合提供的`mulSelectOperator.js`文件,来深入理解其背后的实现原理和常见操作。 1. **基本结构** 多选select组件在HTML中的基本结构是`&lt;select&gt;`标签,...

    Javascript常用语句

    ### JavaScript 常用语句详解 #### 一、输出语句:`document.write("")` `document.write("")` 是一种简单的方式将文本直接输出到HTML文档流中。它通常用于测试目的,因为这种方式会覆盖页面内容,对于动态更新UI...

    javascript 常用代码大全

    以上只是JavaScript常用代码的一部分,实际应用中还有更多复杂且实用的功能,如AJAX异步通信、定时任务、动画效果、模板引擎等。通过不断学习和实践,你可以掌握更高级的JavaScript技巧,为网页开发带来无限可能。在...

    JavaScript对Select的操作.doc

    在HTML中,`&lt;select&gt;`元素常用于创建下拉列表,而JavaScript则提供了操作这些下拉列表的强大功能。本文将深入探讨如何使用JavaScript来操作Select及其内部的Option。 1. **动态创建 Select** 使用`document....

    javascript常用整理

    ### JavaScript 常用知识点梳理 #### 一、基本语法及文档结构 1. **输出语句**: `document.write("")` 是一种简单的输出方法,它会将括号内的内容直接写入当前文档流中。 2. **注释**: JavaScript 支持两种类型的...

    javascript常用方法

    根据提供的文件信息,我们可以整理出一系列...以上就是根据提供的文件信息整理出来的JavaScript常用方法及其详细解释。这些知识点覆盖了从基础语法到高级功能的各个方面,对于初学者和有一定经验的开发者都非常有用。

    JavaScript中一些常用的小技巧

    在JavaScript编程中,掌握一些常用的小技巧可以极大地提高开发效率和代码质量。以下是一些从网络上整合的实用技巧,特别适合初学者学习。 1. 事件源对象:`event.srcElement` 可以获取触发事件的元素,而 `event....

    常用javascript语句大全

    ### 常用JavaScript语句详解 #### 1. `document.write("")`...以上就是从提供的内容中整理出的JavaScript常用语句及其解释。这些语句涵盖了JavaScript编程的基础知识和技术要点,对于学习和使用JavaScript非常有帮助。

    jquery操作select大全

    向select元素中添加option是常用的操作之一,可以通过以下两种方式实现: - 使用`.append()`方法:此方法向select元素内部追加一个option元素。例如: ```javascript $('#id').append('&lt;option value="value"&gt;Text...

    JavaScript常用对象详解

    ### JavaScript常用对象详解 在深入探讨JavaScript的常用对象之前,我们先来理解一下JavaScript作为一种脚本语言,在网页开发中的核心作用。JavaScript使网页具备了动态交互能力,它可以通过操作页面对象和执行各种...

    Javascript select下拉框操作常用方法

    在网页开发中,JavaScript 是一种常用的脚本语言,用于实现客户端的交互功能。下拉框(Select)是HTML表单中的一个重要元素,用于提供用户选择一个或多个选项。本文将详细介绍JavaScript操作下拉框的常见方法。 1. ...

    网页常用javascript

    - `onFocus`:当元素获取焦点时触发,用于在用户开始输入时执行某些操作。 - `onChange`:在输入框内容改变且失去焦点后触发,适合于实时检查或更新输入内容。 - `onSelect`:当用户选中文本时触发,可用于处理...

    JavaScript操作select元素和option的实例代码

    在JavaScript中,`select`元素和`option`元素是HTML表单中常用的部分,用于创建下拉列表。本文将深入探讨如何使用JavaScript操作这些元素,包括添加、删除、修改选项以及处理选择变化的事件。 首先,`select`元素是...

Global site tag (gtag.js) - Google Analytics