`

转转_ js 操作select 大全

阅读更多
js 操作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; 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/yulu0214/archive/2008/12/10/3488325.aspx
分享到:
评论

相关推荐

    js操作select大全 转

    根据给定的信息,本文将对JavaScript操作`&lt;select&gt;`元素的方法进行详细介绍,这些方法涵盖了创建、选择、删除选项等操作。 ### 1. 检查`&lt;select&gt;`元素是否存在值为`paraValue`的项 ```javascript function ...

    [转]Jquery操作select 收藏

    这篇博客 "[转]Jquery操作select 收藏" 可能是博主分享的一个关于如何使用jQuery高效地操作HTML中的&lt;select&gt;元素的教程。在网页设计中,select元素常用于创建下拉菜单,让用户从预设的选项中选择一个或多个值。 ...

    js 加载select 项

    总结起来,`js`加载`select`项是一项基础的前端技术,而`JSelect`则通过JavaScript为`select`元素提供了丰富的自定义样式和交互功能,极大地提升了用户体验。在实际项目中,结合这两者可以构建出既实用又美观的下拉...

    date_select.rar_dateSelect

    4. **自定义日期选择器**:如果"dateSelect"是一个自定义组件,那么它可能包含CSS样式和JavaScript逻辑,用于创建符合特定设计需求或功能扩展的日期选择器。 5. **事件处理**:日期选择器通常会监听用户的操作,...

    根据update语句自动生成select语句

    例如,使用Node.js的`mysql`库,你可以编写JavaScript代码来执行SQL语句,并获取受影响的行: ```javascript const mysql = require('mysql'); const connection = mysql.createConnection({ /* 连接配置 */ }); ...

    js实现动态生成select中的option

    在JavaScript编程中,动态生成`select`元素中的`option`是一项常见的需求,特别是在网页交互或者数据展示时。本文将深入探讨如何使用JavaScript实现这一功能,同时结合提供的`autoSelect.html`和`autoselect.txt`...

    bootstrapselect下拉框js,css

    下面将详细介绍 Bootstrap Select 的使用方法、核心功能以及与 JavaScript(js)和 CSS 的关联。 1. **安装与引入** 要使用 Bootstrap Select,首先确保你已经在项目中引入了 Bootstrap 的 CSS 和 JS 文件,以及 ...

    js select option

    首先,让我们了解JavaScript原生的方法来操作`select`和`option`。通过`document.getElementById('id')`或`document.querySelector('#id')`,你可以获取到对应的`select`元素。一旦有了引用,就可以使用`.options`...

    实现可编辑的select

    在提供的压缩包文件中,包含了两个JavaScript文件:`jquery.editable-select.min.js` 和 `jquery.editable-select.js`。这两个文件是jQuery的一个插件——Editable Select。jQuery是一个广泛使用的JavaScript库,它...

    jquery下拉菜单插件SelectMenu

    `js` 目录则包含了 `SelectMenu.js` 相关的 JavaScript 文件。 总的来说,`SelectMenu.js` 是一个强大的 jQuery 下拉菜单插件,它以其简洁、易用和多样化的特性,为网页开发带来了更优的用户体验。无论是在简单的...

    Select2的插件下载.zip

    使用Select2非常简单,首先需要在页面中引入jQuery和Select2的JavaScript及CSS文件,然后通过简单的配置代码即可启用Select2。例如: ```html &lt;link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist...

    select2.js插件支持拼音搜索(最新版-4.0.6)Demo

    《select2.js插件支持拼音搜索(最新版-4.0.6)Demo》 在当前的Web开发中,交互性和用户体验是至关重要的。为了提升这些方面,许多开发者选择使用JavaScript库来增强HTML元素,例如下拉选择框。select2.js就是其中...

    jquery.selectlist.js下拉框美化插件

    2. **易用性增强**:在保持基本功能不变的基础上,`jQuery.selectlist.js`增加了诸如悬停效果、选中高亮、多选支持等功能,使得用户在操作下拉框时更加直观便捷。例如,鼠标悬停在选项上时,会突出显示当前项,增加...

    jQuery实现select样式美化 jQselect.js

    "jQuery实现select样式美化 jQselect.js" 就是这样一种解决方案,它利用jQuery库来对传统的`&lt;select&gt;`标签进行样式定制,以提供更加丰富的视觉效果。 jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件...

    JS 将select options 排序

    在JavaScript中,我们可以通过DOM(Document Object Model)接口来操作这些元素。 要对`&lt;select&gt;`中的`&lt;option&gt;`进行排序,我们需要遵循以下步骤: 1. **获取`&lt;select&gt;`元素**:通过`document.getElementById`或`...

    select2-4.0.6最新js、css

    2. **初始化`select2`**:通过JavaScript调用`select2()`函数,将普通的`&lt;select&gt;`元素转换为`select2`选择器。 3. **配置参数**:`select2`提供了丰富的配置选项,例如设置搜索的最小字符数、多选的分隔符等,根据...

    前端项目-jquery-nice-select.zip

    1. 引入依赖:首先,你需要在项目中引入jQuery库,然后下载或通过CDN引入`jQuery Nice Select`插件的JS和CSS文件。 2. 应用插件:在页面加载完成后,调用`$('select').niceSelect()`方法对需要美化的`&lt;select&gt;`元素...

    实现select各种搜索功能

    在JavaScript(简称js)的帮助下,我们可以实现这些功能。本文将深入探讨如何利用JavaScript来增强`&lt;select&gt;`标签的搜索功能。 首先,我们需要了解基础的`&lt;select&gt;`结构。一个简单的`&lt;select&gt;`标签如下所示: ```...

    select2支持拼音检索

    《Select2 拼音检索功能详解》 在前端开发中,Select2 是一款非常流行的多功能选择器插件,它极大地扩展了HTML `&lt;select&gt;` 元素的功能,提供了丰富的定制性和用户体验。本文将深入探讨 Select2 的一个独特特性——...

    ySelect-master.zip

    【ySelect.js插件详解】 在前端开发中,选择器组件是常见的交互元素,用于实现用户多选功能。`ySelect.js`是一个基于jQuery的轻量级插件,旨在提供简单且实用的多选功能,它支持反选、搜索以及分组等特性,极大地...

Global site tag (gtag.js) - Google Analytics