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

JS操作select相关方法:新增 修改 删除 选中 清空 判断存在 等

 
阅读更多

1.判断select选项中 是否存在Value="paraValue"的Item
2.向select选项中 加入一个Item
3.从select选项中 删除一个Item
4.修改select选项中 value="paraValue"的text为"paraText"
5.设置select中text="paraText"的第一个Item为选中
6.设置select中value="paraValue"的Item为选中
7.得到select的当前选中项的value
8.得到select的当前选中项的text
9.得到select的当前选中项的Index
10.清空select的项
-------------------------------------------
//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[objSelect.options.length] = varItem;
        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选项中 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中 不存在该项");
    }   
}
       
//5.设置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中 不存在该项");
    }   
}

//6.设置select中value="paraValue"的Item为选中
//document.all.objSelect.value = objItemValue;

//7.得到select的当前选中项的value
//var currSelectValue = document.all.objSelect.value;

//8.得到select的当前选中项的text
//var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;

//9.得到select的当前选中项的Index
//var currSelectIndex = document.all.objSelect.selectedIndex;

//10.清空select的项
// document.all.objSelect.options.length = 0;

分享到:
评论

相关推荐

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

    本文将详细介绍如何使用JavaScript对`&lt;select&gt;`控件进行各种操作,包括新增选项、修改选项、删除选项、选中特定选项、清空所有选项以及判断某个值的选项是否存在。 ### 一、判断选项是否存在 使用以下函数可以检查...

    Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]

    以下是一些基本的方法,涵盖了从新增、修改、删除到选中和清空Select选项等常见需求: 1. **判断Select选项中是否存在指定Value的Item** 使用`jsSelectIsExitItem`函数,你可以检查给定的Value是否已经在Select中...

    Javascript 操作select控件大全

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

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

    操作select控件是前端开发中常见的任务,包括但不限于新增选项、修改选项、删除选项、选中某个选项、清空选项以及判断某个特定值的选项是否存在等。以下是这些操作的知识点详细说明: 1. 判断select选项中是否存在...

    js操作select控件大全

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

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

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

    Javascript操作select控件代码实例

    本文将详细介绍如何使用JavaScript来操作这个控件,包括新增、删除、修改、选中和清空选项,以及判断特定选项是否存在的方法。 1. **判断select选项中是否存在指定Value的Item** ```javascript function ...

    将input file的选择的文件清空的两种解决方案

    首先,通过`getElementById`获取到`&lt;input type="file"&gt;`元素的引用,然后调用`select()`方法选中该输入框,接着使用`document.selection.clear()`清除当前的选择。这种方法基于浏览器的旧版选择和清除机制,其工作...

    Vue实现动态添加或者删除对象和对象数组的操作方法

    在Vue.js框架中,动态添加或删除对象和对象数组是常见的需求,特别是在处理表单数据、列表展示等场景。本文将详细讲解如何在Vue项目中实现这一功能。 首先,我们来看一下添加对象到对象数组的核心代码: ```...

    SelectPage v2.4 发布新增纯下拉列表和关闭分页功能

    **SelectPage**是一个适用于多种场景的下拉选择插件,它支持自定义事件、键盘快捷操作、分页浏览和多选标签展示等功能。其核心特性包括: - **自动化补全**:用户输入关键字时,插件能实时匹配并显示相关选项。 - *...

    107句JS常用语句

    以上就是关于"107句JS常用语句"中提及的部分JavaScript基础知识,这些内容涵盖了数据类型、操作符、流程控制、DOM操作、函数定义以及与用户交互等多个方面,构成了JavaScript编程的基础。了解并熟练运用这些语句,将...

    JS学习宝典

    JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,能够对用户交互进行响应,处理动态内容。以下是一些JS学习的关键知识点: 1. 输出语句:`document.write("")` 用于在HTML文档中输出...

    js函数大全

    JavaScript,也被称为JS,是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责实现客户端的交互功能。本文将全面介绍JavaScript中的基础概念、常用函数以及编程技巧。 1. 输出语句:`document.write("")` ...

    JS常用的几个句子,可以学习提升含金量

    JavaScript,简称JS,是一种广泛应用于Web开发的轻量级脚本语言,它的语法灵活且功能强大,能够直接在客户端运行,提升网页的交互性。在本文中,我们将深入探讨一些JavaScript中常用的关键句式和概念。 1. **输出...

    bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享

    在本文中,我们将探讨如何利用Bootstrap Table实现一些通用的功能,如时间控件、数据导出、动态下拉框、表单验证以及选中与获取信息的方法。 1. **单击单行选中** Bootstrap Table 提供了`click-row.bs.table`事件...

    ExtAspNet_v2.3.2_dll

    -Window的实例方法GetCloseReference等以及ActiveWindow的静态方法GetCloseReference等,其中的Close全部改为Hide。 -增加TabStrip中Tab控件可关闭属性EnableClose(默认为false)以及两个方法GetShowReference和...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -Window的实例方法GetCloseReference等以及ActiveWindow的静态方法GetCloseReference等,其中的Close全部改为Hide。 -增加TabStrip中Tab控件可关闭属性EnableClose(默认为false)以及两个方法GetShowReference和...

Global site tag (gtag.js) - Google Analytics