转 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;
- }
- }
- 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;
转载于:https://www.cnblogs.com/jingangel/p/3964124.html
转 JavaScript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)...相关推荐
- Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)...
1判断select选项中 是否存在Value="paraValue"的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item 4删除selec ...
- JavaScript操作select控件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- JavaScript 操作 COM 控件
目标:用JavaScript 脚本代码调用COM控件,实现基本功能操作: 1.定义及初始化COM控件: 2.调用COM接口: 3.注册COM事件并实现事件调用. 1. 定义及初始化COM控件 ...
- javascript操作office控件
//以下变量为JS公共变量 var TANGER_OCX_bDocOpen = false; var TANGER_OCX_filename;//文件名称 var filetype="&qu ...
- jQuery操作select控件取值和设值
1.级联select的操作,后一个select的值随着前一个select选中值变化 $(".select_A").change(function(){$(".select ...
- Jquery获取select 控件的change事件时选中的值
HTML代码如下: <div class="col-sm-9 col-xs-12"><select id="groupid" class=&q ...
- jQuery操作Select2控件
Select2控件 将普通的select控件,转换为select2控件,通过select2()方法 将某个select控件,转换为select2 $('#selectId').select2({wid ...
- html下拉列表插件,js+CSS实现模拟华丽的select控件下拉菜单效果
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个 ...
- HTML select控件
select控件 select控件用于创建下拉列表框(下拉菜单),并通过 option 元素创建列表中的选项,供用户从中选择. 定义 select控件时,在 select元素中设置 name 属性,并 ...
最新文章
- ASP.NET 数据分页第三篇 - 结合 Custom Control 处理 GridView 的 UI 呈现
- vue父组件自动执行子组件事件
- vue使用html渲染组件,Vue.js在渲染组件之前填充数据
- 天气预报中的风向到底有啥用?
- Largest Rectangle in a Histogram (动态规划+奇思妙想单调栈)求最大矩状图面积
- primefaces_轻量级Web应用程序框架:PrimeFaces(JSF)+ Guice + MyBatis(第2部分)
- JS中的call()和apply()方法(转)
- Python3与OpenCV3.3 图像处理(五)--图像运算
- 【kafka】kafka 启动的时候 日志 find a corrupted index file
- 程序设计模式浅析(plain framework商业版设计模式)
- python中的for语句可以在任意序列_python在循环内任意增加迭代器
- 《Java高级程序设计》第一周作业
- android开发 视图联动_Flutter混合APP开发
- Python decorator
- 吕氏春秋 —— 不韦迁蜀 世传吕览
- 二十三、K8s集群强化1-认证
- E-MapReduce 2.0.0 版本发布
- 什么是端到端的训练或学习?
- pl/mysql安装_PL/SQL环境安装设置
- 五年高考三年模拟暗部软件库_小老弟,你的《五年高考三年模拟》掉高速上了……...