`
pichcar
  • 浏览: 289416 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

select元素操作

阅读更多
/*------------------------------------------------------
 *作者:xieyu @ 2007-08-14
 *语言: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 == ItemValue){
   obj.options.remove(i);
  }
 }       
}
//4.删除某一个index的选项
function RemoveItem(obj,index){
 obj.options.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; 
}
分享到:
评论

相关推荐

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

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

    Selenium WebDriver调用JQuery操作Select元素

    使用Selenium自带的API操作Select元素时页面可能出现上移或遮挡,导致元素操作失败; 介于此问题,可以使用JQuery来操作Select元素,具体实现见附件。

    jquery_select

    ### jQuery与Select元素操作详解 在前端开发中,jQuery是一个非常流行且强大的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在处理表单元素,尤其是`&lt;select&gt;`下拉菜单时,jQuery...

    select元素javascript常用操作

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

    向元素中动态添加option

    在网页开发中,`&lt;select&gt;`元素用于创建下拉列表,常常用于用户选择操作。而动态添加`&lt;option&gt;`是常见的交互设计,特别是在数据量大或者数据需要实时更新的场景中。这篇博客“向&lt;select&gt;元素中动态添加option”探讨的...

    [转]Jquery操作select 收藏

    在网页设计中,select元素常用于创建下拉菜单,让用户从预设的选项中选择一个或多个值。 首先,我们来了解jQuery选择器。jQuery的选择器基于CSS,允许开发者以简洁的方式选取DOM元素。例如,`$('select')` 将选取...

    EL,jstl,js 对select元素

    在Web开发中,选择框(`&lt;select&gt;`元素)经常用于创建下拉菜单,让用户从预定义的选项中做出选择。EL(Expression Language)、JSTL(JavaServer Pages Standard Tag Library)和JavaScript都是处理此类任务的重要...

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

    Select元素用于创建一个下拉列表,而Option元素则表示列表中的一个选项。在HTML中,我们可以预先定义一些Option,但有时候我们需要在运行时根据用户的行为或服务器返回的数据动态添加新的选项。 以下是一个简单的...

    键盘操作select下拉框

    通过理解HTML和JavaScript的基本原理,我们可以定制和优化`select`元素的键盘交互,使其更加符合用户的操作习惯。同时,不要忘记关注无障碍标准,确保所有用户都能方便地使用我们的网站或应用。

    javascript操作select元素实例分析

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

    12任务十二、unittest框架实现B2C商城ECShop商品查询功能.docx

    5. **Select元素操作**:在test_02_select方法中,我们需要对select元素进行操作,可能涉及到选择特定选项。Selenium提供了一个`Select`类,用于更方便地操作select元素。例如,我们可以使用`Select(self.driver....

    javascript 操作表单select的常用步骤

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

    select 控件操作大全

    在网页开发中,`&lt;select&gt;` 元素被广泛用于创建下拉列表,用户可以从中选择一个或多个选项。使用JavaScript可以轻松地操纵这些 `&lt;select&gt;` 控件,从而实现动态地添加、删除、修改选项等功能。本文将详细介绍如何使用...

    JavaScript操作select大全

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

    一个关于select元素的JavaScript的simple demo

    这个"一个关于select元素的JavaScript的simple demo"是一个演示如何使用JavaScript与`&lt;select&gt;`元素进行交互的实例。在这个demo中,我们可以学习到JavaScript如何改变、获取和处理`&lt;select&gt;`元素中的选项。 首先,`...

    JQuery操作select

    `select[@name='country'] option[@selected]`表示选择name属性为'country'的select元素中被选中的option元素。`input[@type=radio][@checked]`则是选择被选中的单选按钮,而`input[@type=checkbox][@checked]`则...

    js 操作select和option

    ### JavaScript 操作 Select 和 Option 的方法详解 在网页开发中,`&lt;select&gt;` 元素是一种常见的表单控件,用于收集用户输入的选择项。它通常包含多个 `&lt;option&gt;` 子元素供用户选择。通过 JavaScript,我们可以实现...

    jquery操作select大全

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

Global site tag (gtag.js) - Google Analytics