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 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
原生js实现轮播图
Feb 27 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
简单了解常用的JavaScript 库
Jul 16 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
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
jQuery的学习步骤
2011/02/23 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
Python的Flask框架中web表单的教程
2015/04/20 Python
Python中random模块用法实例分析
2015/05/19 Python
Python下Fabric的简单部署方法
2015/07/14 Python
浅谈Python peewee 使用经验
2017/10/20 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
详解python读取image
2019/04/03 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
python分数表示方式和写法
2019/06/26 Python
python全栈知识点总结
2019/07/01 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
个人租房协议书
2014/04/09 职场文书
代办委托书怎么写
2014/08/01 职场文书
荒岛余生观后感
2015/06/09 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
JavaScript中reduce()的用法
2022/05/11 Javascript