`
ch_kexin
  • 浏览: 902720 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

JS 操作Select元素

 
阅读更多
Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->/*------------------------------------------------------
 *说明: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; 
}

 

分享到:
评论

相关推荐

    javascript操作select元素实例分析

    本文实例讲述了javascript操作select元素的用法。分享给大家供大家参考。具体分析如下: 这里熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮。 当选择select中某一项时...

    JavaScript操作select&&table

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

    jQuery为动态生成的select元素添加事件的方法

    这个操作会把新的HTML字符串插入到页面的DOM中,从而使得select元素变得可用。 7. 绑定事件到动态元素:文章最后部分展示了如何为动态生成的select元素绑定事件处理器。通过`$.on()`方法,即使元素是后来添加到页面...

    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....

    js 动态新增改变删除select的值

    ### JavaScript 操作 Select 元素知识点详解 #### 标题:js 动态新增改变删除select的值 在网页开发中,`&lt;select&gt;`元素是非常常见的表单元素之一,用于提供下拉列表供用户选择。JavaScript 提供了丰富的 API 来...

    JavaScript操作select大全

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

    EL,jstl,js 对select元素

    综上所述,EL、JSTL和JavaScript共同为`&lt;select&gt;`元素提供了强大的功能,使得在Web应用中构建动态、交互式的下拉菜单成为可能。开发者可以根据需求灵活选择使用这些技术来优化用户体验。在实际项目中,常常会结合...

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

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

    javascript 操作表单select的常用步骤

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

    JS动态添加Select中的Option元素值

    在JavaScript(JS)编程中,动态添加Select中的Option元素值是一项常见的需求,特别是在网页交互或者数据填充时。这里我们将深入探讨如何实现这个功能,并提供一个实际的案例来演示这一过程。 首先,我们要理解HTML...

    js操作select大全 转

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

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

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

    select元素javascript常用操作

    结合JavaScript,我们可以实现对`&lt;select&gt;`元素的动态操作,增强用户体验,实现更复杂的交互功能。下面将详细介绍在JavaScript中对`&lt;select&gt;`元素进行的常见操作。 ### 1. 检查`&lt;select&gt;`元素中是否存在特定值的项 ...

    javascript操作Select标记中options集合

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

    js操作select相关方法

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

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

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

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

    《使用Select2优化HTML Select元素的交互体验》 在网页开发中,`&lt;select&gt;`元素是常见的下拉选择框,但其默认样式和功能相对简陋。为了提升用户体验,开发者通常会选择使用第三方库来增强这一组件,其中Select2是一...

Global site tag (gtag.js) - Google Analytics