`

select控件

    博客分类:
  • JS
阅读更多

http://dishell.iteye.com/blog/298175

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;  

 

分享到:
评论

相关推荐

    select 控件操作大全

    ### Select 控件操作大全 #### 一、简介 在网页开发中,`&lt;select&gt;` 元素被广泛用于创建下拉列表,用户可以从中选择一个或多个选项。使用JavaScript可以轻松地操纵这些 `&lt;select&gt;` 控件,从而实现动态地添加、删除...

    jquery 多功能select控件,多功能选择控件

    《jQuery多功能Select控件——实现高效交互与美观界面》 在网页开发中,Select控件是常见的用户交互元素,用于提供下拉选项供用户选择。然而,原生的HTML Select控件在功能和视觉效果上往往无法满足现代网页设计的...

    可编辑并自动提示的select控件

    标题中的“可编辑并自动提示的select控件”指的是在Web开发中,使用特定的JavaScript库或组件,创建一种能够动态提示选项,并且允许用户编辑输入的下拉选择框(Select)控件。这种控件通常用于提高用户体验,让用户...

    js操作select控件大全

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

    Javascript 操作select控件大全

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

    SELECT控件 美化

    在网页设计中,SELECT控件通常用于创建下拉列表,让用户在多个选项中进行选择。然而,原生的SELECT控件样式在不同浏览器之间存在差异,且样式控制能力有限,往往无法满足设计师对于美观和品牌一致性的要求。"SELECT...

    史上最强大的select控件(可搜索的下拉框),支持汉字中文、拼音首字母、英文搜索方式

    史上最强大的select控件(可搜索的下拉框),支持汉字中文、拼音首字母、英文搜索方式 依赖高版本的jquery ,适应各种高版本的浏览器。 调用方法: 对任意一个&lt;select id="select1"&gt; 不需要做任何改动,只需加入以下...

    dbgrid select控件

    【标题】"dbgrid select控件"涉及到的是在编程中使用的一种特定的用户界面元素,TDBGridEh,它是数据库应用开发中的一个重要组件。TDBGridEh是EhLib库的一部分,专为Delphi和C++Builder等RAD Studio环境设计。这个...

    QUI框架多种样式的SELECT控件.rar

    本资源"QUI框架多种样式的SELECT控件.rar"正是针对这一需求提供的一种解决方案。下面将详细介绍这个资源及其相关知识点。 首先,`QUI框架`是一个专为前端开发设计的框架,它提供了丰富的组件和工具,简化了UI元素的...

    jquery 自定义select控件

    《jQuery自定义Select控件深度解析》 在Web开发中,Select控件是常见的表单元素,用于提供用户选择选项的功能。然而,原生的Select控件在样式和交互上存在局限性,不能满足现代网页设计的需求。为了解决这个问题,...

    可输入可选择的SELECT控件

    但随着用户交互需求的提升,"可输入可选择的SELECT控件"应运而生,它结合了输入框和下拉选择的功能,提高了用户体验。 这种控件通常被称为"自动补全SELECT"或"智能SELECT",在用户开始输入时,会根据输入的内容动态...

    完美解决IE6下select控件样式

    "完美解决IE6下select控件样式"的资源针对的就是这个历史悠久的问题。Select控件是HTML中用于创建下拉菜单的元素,但在不同的浏览器中,其默认样式可能会有很大差异,特别是对于IE6,它的呈现效果通常不符合现代网页...

    JQ美化select控件

    然而,原生的SELECT控件在样式上通常较为单一,无法满足现代网页设计的美观需求。针对这一问题,开发者们创造了许多jQuery插件来美化SELECT控件,使其在功能和视觉效果上都有所提升。本项目就是其中的一款,名为“JQ...

    mobileSelect移动端手机下拉控件

    mobileSelect控件通过简洁的API和丰富的自定义选项,使得开发者能够轻松地在移动应用中集成高质量的下拉选择功能。 首先,我们来探讨一下mobileSelect的核心特性: 1. **响应式设计**:mobileSelect控件具备良好的...

    jquery.inputer 完美替换select控件 带模糊搜索

    1.jquery.inputer为替代select控件开发! 2.本控件经过测试,兼容IE,火狐! 3.本控件可以自由扩展! 4.本控件为原创,代码有些凌乱,但功能齐全! ---本控件代码为本人编写,完全处于分享拿出来的,有什么地方写的...

    CSS+JS实现 用UL和li标签模拟select控件.zip

    CSS+JS实现 用UL和li标签模拟select控件 资源介绍: 纯CSS实现的动态按钮特效,想知道按钮效果的朋友,可以去我的专栏查看。资源名就是文章名。在前端的工作中,经常会遇到 selcet控件,但我们用css来写它的样式时候...

    JQ高仿select控件

    &lt;p&gt;JQ高仿select控件 &lt;br/&gt; ;border-bottom:5px solid #ff0000;"&gt; 张三 李四 王二麻子 &lt;td width=20&gt;&lt;/td&gt; ...

    使用Select控件实现联动效果的ASP实例 安徽机电职业技术学院陈伟

    在网页设计中,联动效果是一种常见的交互设计手法,它通常涉及到多个下拉菜单(Select控件)之间的数据关联,当用户在一个下拉菜单中选择一个选项时,另一个下拉菜单的内容会根据前者的选值自动更新。这种效果常用于...

    美化select控件Jquery chosen

    "美化select控件Jquery chosen"正是为了解决这一问题而存在的。Chosen是一个流行的jQuery插件,它提供了美观且易用的多选和单选下拉菜单,极大地提升了用户体验。 Chosen插件的核心特性包括: 1. **美化样式**:...

    IosSelect控件

    "IosSelect控件"就是为了实现这种效果而设计的一款仿iOS风格的下拉框控件。它提供了类似iPhone原生下拉选择的交互体验,能够使你的应用在视觉上更加贴近iOS系统,提升用户在使用过程中的舒适度。 这款控件的主要...

Global site tag (gtag.js) - Google Analytics