`

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

阅读更多

 1.判断select选项中 是否存在Value="paraValue"的Item
 2.向select选项中 加入一个Item
 3.从select选项中 删除一个Item
 4.删除select中选中的项
 5.修改select选项中 value="paraValue"的text为"paraText"
 6.设置select中text="paraText"的第一个Item为选中
 7.设置select中value="paraValue"的Item为选中
 8.得到select的当前选中项的value
 9.得到select的当前选中项的text
10.得到select的当前选中项的Index
11.清空select的项

 

js 代码
// 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.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中选中的项    
function jsRemoveSelectedItemFromSelect(objSelect) {        
    var length = objSelect.options.length - 1;    
    for(var i = length; i >= 0; i--){    
        if(objSelect[i].selected == true){    
            objSelect.options[i] = null;    
        }    
    }    
}      
   
// 5.修改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中 不存在该项");        
    }        
}        
   
// 6.设置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中 不存在该项");        
    }        
}        
   
// 7.设置select中value="paraValue"的Item为选中    
document.all.objSelect.value = objItemValue;    
       
// 8.得到select的当前选中项的value    
var currSelectValue = document.all.objSelect.value;    
       
// 9.得到select的当前选中项的text    
var currSelectText = document.all.objSelect.options

[document.all.objSelect.selectedIndex].text;    
       
// 10.得到select的当前选中项的Index    
var currSelectIndex = document.all.objSelect.selectedIndex;    
       
// 11.清空select的项    
document.all.objSelect.options.length = 0;   

 

分享到:
评论

相关推荐

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

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

    Javascript 操作select控件大全

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

    select 控件操作大全

    Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等) JavaScript 1判断select选项中 是否存在Value="paraValue"的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item...

    js操作select控件大全

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

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

    1判断select选项中 是否存在Value=”paraValue”的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item 4删除select中选中的项 5修改select选项中 value=”paraValue”的text为”paraText” 6设置...

    Javascript操作select控件代码实例

    新增、修改、删除、选中、清空、判断存在等 1、判断select选项中 是否存在Value=”paraValue”的Item function jsselectisexititem(objselect,objitemvalue) { var isexit = false; for(var i=0;i&lt;objselect....

    js操作select控件的几种方法

    以下是一些关键的JavaScript方法,用于处理select控件: 1. **判断select选项中是否存在Value="paraValue"的Item** 使用`jsSelectIsExitItem`函数,通过遍历select的options数组并检查每个option的value属性,可以...

    jquery下拉select控件操作方法分享(jquery操作select)

    本文将详细讲解如何使用jQuery来操作select元素,包括获取和设置选项、添加与删除选项以及改变选中状态等常见操作。 1. **获取和设置Select选项** - `$("#select_id").change(function() {...})`:此代码用于为...

    jq重置select下拉列表.docx

    jq是一种轻量级的JavaScript库,用于简化DOM操作、事件处理和动画等功能。jq提供了许多实用的方法,例如选择器、事件绑定、动画等,帮助开发者快速构建网页应用程序。 二、select下拉列表的重置 在select下拉列表中...

    JQuery select控件的相关操作实现代码

    在Web开发中,jQuery库为JavaScript提供了一种更简洁、更高效的方式来操作DOM元素,包括对select控件的操作。以下是对标题和描述中提到的jQuery操作select控件的相关知识点的详细说明: 1. **获取select控件的选择...

    JQuery获取input控件值.docx

    下面将详细解释如何使用jQuery来获取和设置text、textarea、radio、checkbox以及select等不同类型的input控件的值。 1. **获取text和textarea值**: - 对于`&lt;input type="text"&gt;`和`&lt;textarea&gt;`,可以使用`.attr()...

    程序天下:JavaScript实例自学手册

    1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...

    《程序天下:JavaScript实例自学手册》光盘源码

    1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...

    layui checkbox默认选中,获取选中值,清空所有选中项的例子

    在本文中,我们将深入探讨如何使用layui框架处理checkbox控件,包括如何设置默认选中、获取选中值以及清空所有选中项。layui是一款基于前端JavaScript库的模块化前端框架,提供了丰富的UI组件,包括表格、表单、按钮...

    JavaScript完全自学宝典 源代码

    示例描述:介绍JavaScript与表单控件。 6.1.html JavaScript获取文本框的值。 6.2.html JavaScript控制文本框。 6.3.html 文本框的JavaScript特效。 6.4.html 获取select元素的值。 6.5....

    javascript日历

    JavaScript日历是一个交互式的控件,常用于网页中让用户方便地选择日期。它采用JavaScript语言编写,具有浮动特性,能够定位在页面的任意位置,并且用户可以通过点击来选取日期。这个日历的设计允许用户在不离开当前...

    layui之select的option叠加问题的解决方法

    该问题的出现可能是由于layui的select控件没有正确地实现option的叠加,导致option的值无法清空和叠加的问题。在本文中,我们将为大家分享解决layui之select的option叠加问题的解决方法。 首先,让我们来了解问题的...

    JQuery 获取和设置Select选项的代码

    在网页开发中,jQuery 是一个非常流行的 JavaScript 库,它简化了 DOM 操作、事件处理以及Ajax交互等任务。在处理HTML元素时,选择器(Select)是常见的一种表单控件,用于让用户从预定义的选项中进行选择。本文将...

Global site tag (gtag.js) - Google Analytics