`
Pweb
  • 浏览: 55253 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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?
}
}
? 上一篇:关于SqlDataReader关闭后的connection关闭的做法~
? 下一篇:实现年月日下拉菜单的javascript代码示例~
Feedback
#1楼 回复 引用
2007-08-14 16:21 by 我希望[未注册用户]
好东西啊,受益了,顶一下
#2楼 回复 引用
2007-08-31 10:27 by pan[未注册用户]
拔错,谢谢啦啊!!!
#3楼 回复 引用 查看
2007-09-04 09:48 by 骆驼祥子

#4楼 回复 引用
2007-09-04 11:18 by Paple[未注册用户]
总结的很好,长见识了。。。
#5楼 回复 引用
2007-10-07 23:31 by s-fish[未注册用户]
受益匪浅谢谢楼主总结这么好的东东
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中操作`&lt;select&gt;`控件是网页开发中常见的需求,涉及到增、删、查、改等操作。本文将详细介绍如何使用JavaScript对`&lt;select&gt;`控件进行各种操作,包括新增选项、修改选项、删除选项、选中特定选项、清空...

    js操作select控件大全

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

    select 控件操作大全

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

    JAVASCRIPT教程

    JavaScript的一些教程和参考手册: JavaScript 语言参考.chm JavaScript帮助教程.chm JAVASCRIPT教程手册.chm javascript手册.CHM ...Javascript 操作select控件大全.txt 欢迎大家下载,希望对你有用!

    SELECT控件 美化

    `TransSelect.js`是核心的JavaScript代码,它提供了自定义SELECT控件样式的功能。这个脚本可能包含了以下关键知识点: 1. **模拟SELECT控件**:使用HTML、CSS和JavaScript创建一个视觉上与SELECT控件相似但样式可控...

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

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

    c# javascript 操作 listBox控件

    在客户端(浏览器端)的JavaScript中,我们不能直接操作服务器端的ASP.NET ListBox控件,但可以通过DOM(文档对象模型)操作HTML的`&lt;select&gt;`元素,这与ListBox功能相似。 1. **获取和设置选项** 使用`document....

    Javascript操作select控件代码实例

    【JavaScript操作select控件】在Web开发中,`select`元素是HTML中用于创建下拉列表的常见控件。本文将详细介绍如何使用JavaScript来操作这个控件,包括新增、删除、修改、选中和清空选项,以及判断特定选项是否存在...

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

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

    JavaScript模拟select

    ### JavaScript模拟select控件知识点详解 #### 一、引言 在前端开发中,有时我们需要对浏览器原生的`&lt;select&gt;`元素进行定制化处理,比如实现更丰富的样式或者增加额外的功能。本篇将深入探讨如何使用纯JavaScript...

    几个经典JavaScript控件

    - 在JavaScript中,选择控件通常指的是下拉列表(`&lt;select&gt;` 元素)。通过JavaScript,我们可以动态添加、删除选项,改变选中状态,甚至实现多选功能。`jQuery UI` 提供了可自定义的下拉选择器,如`Autocomplete`,...

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

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

    jquery 自定义select控件

    为了解决这个问题,开发者常常会使用jQuery等JavaScript库来创建自定义的Select控件,以实现更加美观和交互丰富的选择器。本文将深入探讨如何使用jQuery实现自定义Select控件,并分析其核心原理。 一、为何需要...

    mobileSelect移动端手机下拉控件

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

    处理html 控件select的js函数

    本js文件——`selectDeal.js`显然专注于提供对`&lt;select&gt;`控件进行各种操作的函数。 1. **获取和设置选中项** JavaScript中的`document.getElementById`方法可以用来获取指定ID的`&lt;select&gt;`元素。然后,我们可以...

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

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

    Javascript DataTables 表格控件

    4. `Select-1.2.6`: 这个扩展允许用户选择表格中的行、列或单元格,增强了表格的交互性。 5. `Scroller-1.5.0`: 数据滚动插件,用于实现虚拟滚动,即使处理大数据集也能保持流畅的用户体验,只加载可视区域内的数据...

    select2控件回显方法

    JavaScript 技术: select2控件选择多个数据,以及回显数据的方法 。

Global site tag (gtag.js) - Google Analytics