javascript如何操作HTML下拉列表标签


Posted in Javascript onAugust 20, 2015

先给大家讲下大概实现思路,具体内容介绍请看下面。

判断select选项中 是否存在Value="paraValue"的Item

向select选项中 加入一个Item

从select选项中 删除一个Item

删除select中选中的项

修改select选项中 value="paraValue"的text为"paraText"

设置select中text="paraText"的第一个Item为选中

设置select中value="paraValue"的Item为选中

得到select的当前选中项的value

得到select的当前选中项的text

得到select的当前选中项的Index

清空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;

以上内容介绍了javascript操作html下拉列表标签的方法,希望大家喜欢本文所述。

Javascript 相关文章推荐
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 #Javascript
js脚本分页代码分享(7种样式)
Aug 19 #Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 #Javascript
JS文字球状放大效果代码分享
Aug 19 #Javascript
IE6兼容透明背景图片及解决方案
Aug 19 #Javascript
JavaScript实现表格快速变色效果代码
Aug 19 #Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 #Javascript
You might like
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
浅析return false的正确使用
2013/11/04 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
Python requests模块cookie实例解析
2020/04/14 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
旷课检讨书2000字
2014/01/14 职场文书
交通安全教育制度
2014/02/02 职场文书
大学班级文化建设方案
2014/05/06 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
化学工程专业求职信
2014/08/10 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
质检员岗位职责
2015/02/03 职场文书
先进教师个人总结
2015/02/11 职场文书
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS