`
chengxianju
  • 浏览: 260096 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

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

阅读更多

[转载而已]看别人总结的不错,文章地址:http://www.58php.com/news.php?id=102

 

1.1判断select选项中 是否存在Value="paraValue"的Item   
2.2向select选项中 加入一个Item   
3.3从select选项中 删除一个Item   
4.4删除select中选中的项   
5.5修改select选项中 value="paraValue"的text为"paraText"   
6.6设置select中text="paraText"的第一个Item为选中   
7.7设置select中value="paraValue"的Item为选中   
8.8得到select的当前选中项的value   
9.9得到select的当前选中项的text   
10.10得到select的当前选中项的Index   
11.11清空select的项   
12. 
13.js 代码   
14.// 1.判断select选项中 是否存在Value="paraValue"的Item          
15.function jsSelectIsExitItem(objSelect, objItemValue) {          
16.    var isExit = false;          
17.    for (var i = 0; i < objSelect.options.length; i++) {          
18.        if (objSelect.options[i].value == objItemValue) {          
19.            isExit = true;          
20.            break;          
21.        }          
22.    }          
23.    return isExit;          
24.}           
25.     
26.// 2.向select选项中 加入一个Item          
27.function jsAddItemToSelect(objSelect, objItemText, objItemValue) {          
28.    //判断是否存在          
29.    if (jsSelectIsExitItem(objSelect, objItemValue)) {          
30.        alert("该Item的Value值已经存在");          
31.    } else {          
32.        var varItem = new Option(objItemText, objItemValue);        
33.        objSelect.options.add(varItem);       
34.        alert("成功加入");       
35.    }          
36.}          
37.     
38.// 3.从select选项中 删除一个Item          
39.function jsRemoveItemFromSelect(objSelect, objItemValue) {          
40.    //判断是否存在          
41.    if (jsSelectIsExitItem(objSelect, objItemValue)) {          
42.        for (var i = 0; i < objSelect.options.length; i++) {          
43.            if (objSelect.options[i].value == objItemValue) {          
44.                objSelect.options.remove(i);          
45.                break;          
46.            }          
47.        }          
48.        alert("成功删除");          
49.    } else {          
50.        alert("该select中 不存在该项");          
51.    }          
52.}      
53.     
54.     
55.// 4.删除select中选中的项      
56.function jsRemoveSelectedItemFromSelect(objSelect) {          
57.    var length = objSelect.options.length - 1;      
58.    for(var i = length; i >= 0; i--){      
59.        if(objSelect[i].selected == true){      
60.            objSelect.options[i] = null;      
61.        }      
62.    }      
63.}        
64.     
65.// 5.修改select选项中 value="paraValue"的text为"paraText"          
66.function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {          
67.    //判断是否存在          
68.    if (jsSelectIsExitItem(objSelect, objItemValue)) {          
69.        for (var i = 0; i < objSelect.options.length; i++) {          
70.            if (objSelect.options[i].value == objItemValue) {          
71.                objSelect.options[i].text = objItemText;          
72.                break;          
73.            }          
74.        }          
75.        alert("成功修改");          
76.    } else {          
77.        alert("该select中 不存在该项");          
78.    }          
79.}          
80.     
81.// 6.设置select中text="paraText"的第一个Item为选中          
82.function jsSelectItemByValue(objSelect, objItemText) {              
83.    //判断是否存在          
84.    var isExit = false;          
85.    for (var i = 0; i < objSelect.options.length; i++) {          
86.        if (objSelect.options[i].text == objItemText) {          
87.            objSelect.options[i].selected = true;          
88.            isExit = true;          
89.            break;          
90.        }          
91.    }                
92.    //Show出结果          
93.    if (isExit) {          
94.        alert("成功选中");          
95.    } else {          
96.        alert("该select中 不存在该项");          
97.    }          
98.}          
99.     
100.// 7.设置select中value="paraValue"的Item为选中      
101.document.all.objSelect.value = objItemValue;      
102.         
103.// 8.得到select的当前选中项的value      
104.var currSelectValue = document.all.objSelect.value;      
105.         
106.// 9.得到select的当前选中项的text      
107.var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;      
108.         
109.// 10.得到select的当前选中项的Index      
110.var currSelectIndex = document.all.objSelect.selectedIndex;      
111.         
112.// 11.清空select的项      
113.document.all.objSelect.options.length = 0;

分享到:
评论

相关推荐

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

    本文将详细介绍如何使用JavaScript对`&lt;select&gt;`控件进行各种操作,包括新增选项、修改选项、删除选项、选中特定选项、清空所有选项以及判断某个值的选项是否存在。 ### 一、判断选项是否存在 使用以下函数可以检查...

    Javascript 操作select控件大全

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

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

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

    Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]

    以下是一些基本的方法,涵盖了从新增、修改、删除到选中和清空Select选项等常见需求: 1. **判断Select选项中是否存在指定Value的Item** 使用`jsSelectIsExitItem`函数,你可以检查给定的Value是否已经在Select中...

    js操作select控件大全

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

    js 动态新增改变删除select的值

    本文将详细讲解如何通过 JavaScript 动态地添加、修改和删除 `&lt;select&gt;` 元素中的选项。 #### 描述:Javascript 操作 select 是表单中常见的一种,删除多个 select 值时出现的问题及解决方案 在处理 `&lt;select&gt;` ...

    Javascript操作select控件代码实例

    本文将详细介绍如何使用JavaScript来操作这个控件,包括新增、删除、修改、选中和清空选项,以及判断特定选项是否存在的方法。 1. **判断select选项中是否存在指定Value的Item** ```javascript function ...

    Vue实现动态添加或者删除对象和对象数组的操作方法

    在Vue.js框架中,动态添加或删除对象和对象数组是常见的需求,特别是在处理表单数据、列表展示等场景。本文将详细讲解如何在Vue项目中实现这一功能。 首先,我们来看一下添加对象到对象数组的核心代码: ```...

    将input file的选择的文件清空的两种解决方案

    首先,通过`getElementById`获取到`&lt;input type="file"&gt;`元素的引用,然后调用`select()`方法选中该输入框,接着使用`document.selection.clear()`清除当前的选择。这种方法基于浏览器的旧版选择和清除机制,其工作...

    js函数大全

    JavaScript,也被称为JS,是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责实现客户端的交互功能。本文将全面介绍JavaScript中的基础概念、常用函数以及编程技巧。 1. 输出语句:`document.write("")` ...

    107句JS常用语句

    以上就是关于"107句JS常用语句"中提及的部分JavaScript基础知识,这些内容涵盖了数据类型、操作符、流程控制、DOM操作、函数定义以及与用户交互等多个方面,构成了JavaScript编程的基础。了解并熟练运用这些语句,将...

    JS常用的几个句子,可以学习提升含金量

    4. **DOM结构**:浏览器窗口的DOM结构中,`window`对象是顶级对象,包含了`navigator`、`screen`、`history`、`location`和`document`等子对象。 5. **获取表单元素**:`document.getElementById("ID")`可以获取...

    JS学习宝典

    JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,能够对用户交互...在实际编程中,还会涉及事件处理、数组操作、对象和原型链、函数高级特性、定时器、正则表达式等更复杂的概念和技术。

    bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享

    在本文中,我们将探讨如何利用Bootstrap Table实现一些通用的功能,如时间控件、数据导出、动态下拉框、表单验证以及选中与获取信息的方法。 1. **单击单行选中** Bootstrap Table 提供了`click-row.bs.table`事件...

    amis前端低代码框架-其他

    Date 快捷键支持上月底autoFill 支持多选CRUD 的 toolbar 默认不再将最后一个组件放右边接口兼容多种 json 返回格式CRUD filterable 判断是否选中不要那么严格Button-Group disabled 统一使用透明度的方式来实现,...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -增加示例(data/tree_select_run.aspx),如何选中当前节点的所有子节点(feedback:wjl_wjl520)。 +TreeNode的属性NodeId被重命名为NodeID,这是ExtAspNet中的一个命名约定。 -同时更名的还有GridColumn的...

    ExtAspNet_v2.3.2_dll

    -增加示例(data/tree_select_run.aspx),如何选中当前节点的所有子节点(feedback:wjl_wjl520)。 +TreeNode的属性NodeId被重命名为NodeID,这是ExtAspNet中的一个命名约定。 -同时更名的还有GridColumn的...

Global site tag (gtag.js) - Google Analytics