`
lusx
  • 浏览: 24633 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

select控件操作

    博客分类:
  • JS
 
阅读更多
<script>
// 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;  
</script>
分享到:
评论

相关推荐

    select 控件操作大全

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

    js操作select控件大全

    在进行 select 控件操作时,经常需要判断某个选项是否存在于 select 控件中。使用 JavaScript 可以轻松地实现这个功能。下面是一个示例代码: function jsSelectIsExitItem(objSelect, objItemValue) { var isExit...

    Javascript 操作select控件大全

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

    SELECT控件 美化

    6. **响应式设计**:考虑到移动设备的屏幕大小和触摸操作,可能还需要实现响应式布局,使SELECT控件在不同设备上都能适配并保持可用性。 最后,`TransSelectTest.html`是测试页面,它包含了SELECT控件美化实例,...

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

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

    mobileSelect移动端手机下拉控件

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

    jquery 自定义select控件

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

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

    通过以上方法,开发者可以轻松地实现对jQuery下拉select控件的各种操作,提高开发效率。这些操作对于动态更新界面、处理用户交互等场景尤其有用。在实际应用中,可以根据具体需求灵活组合使用这些方法。

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

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

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

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

    dbgrid select控件

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

    可输入可选择的SELECT控件

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

    完美解决IE6下select控件样式

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

    JQ美化select控件

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

    selectTree 下拉树菜单控件

    首先,SelectTree控件的核心功能是将数据结构化为可交互的树形展示,并提供下拉操作。在JavaScript中,通常通过AJAX技术从服务器获取JSON格式的数据,这些数据包含了节点信息(如ID、父ID、文本等)以及层级关系。...

    js操作select控件的几种方法

    这些方法构成了对select控件进行基本操作的基础。在实际的网页开发中,开发者可能还需要应对更多复杂情况,例如处理多选select、动态加载选项、处理事件等。了解和掌握这些基本操作对于JavaScript前端开发者来说是...

    js特殊控件学习个人总结

    #### Select 控件操作总结 **一、获取 Select 的选中文本和值** 1. **监听 Select 变化:** ```javascript $("#select_id").change(function(){ // 代码块:此处可以执行相关的处理逻辑 }); ``` 2. **获取...

    selectTree tree控件 日历控件 tree控件 radio CheckBox demo

    树控件与selectTree类似,也是展示和操作层次数据的工具,但不一定涉及选择操作。它可以用来展示文件系统、网站导航或者数据库结构等。ZTree不仅可以作为selectTree,也可以作为普通的tree控件,支持自定义图标、...

Global site tag (gtag.js) - Google Analytics