`
fehly
  • 浏览: 248615 次
  • 性别: 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 发布新增纯下拉列表和关闭分页功能

    - **清空按钮**:在单选模式下,选中项目后,自动显示清空按钮,方便用户快速取消选择。 - **回调错误修复**:解决了在多选模式下,点击“移除本页”和“清除所有”按钮后,回调函数可能出现的错误。 - **无结果提示...

    JS学习宝典

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

    107句JS常用语句

    JavaScript,简称JS,是一种广泛用于网页和网络应用的编程语言,尤其在客户端脚本中扮演着重要角色。这里我们详细探讨一下标题和描述中提到的一些关键知识点。 1. **输出语句**:`document.write()` 是JavaScript中...

    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

    -增加示例(data/tree_select_run.aspx),如何选中当前节点的所有子节点(feedback:wjl_wjl520)。 +TreeNode的属性NodeId被重命名为NodeID,这是ExtAspNet中的一个命名约定。 -同时更名的还有GridColumn的...

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

    -增加示例(data/tree_select_run.aspx),如何选中当前节点的所有子节点(feedback:wjl_wjl520)。 +TreeNode的属性NodeId被重命名为NodeID,这是ExtAspNet中的一个命名约定。 -同时更名的还有GridColumn的...

Global site tag (gtag.js) - Google Analytics