Javascript操作select控件代码实例


Posted in Javascript onFebruary 14, 2020

这篇文章主要介绍了Javascript操作select控件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

新增、修改、删除、选中、清空、判断存在等

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[objselect.options.length] = varitem;
    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 相关文章推荐
JavaScript 图片预览效果 推荐
Dec 22 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 #Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 #Javascript
node事件循环和process模块实例分析
Feb 14 #Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 #Javascript
JavaScript简单编程实例学习
Feb 14 #Javascript
JS实现打砖块游戏
Feb 14 #Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 #Javascript
You might like
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
JS处理VBArray的函数使用说明
2008/05/11 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
Python3 伪装浏览器的方法示例
2017/11/23 Python
详解python多线程之间的同步(一)
2019/04/03 Python
python exit出错原因整理
2020/08/31 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
用python读取xlsx文件
2020/12/17 Python
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
党员思想汇报范文
2013/12/30 职场文书
小学安全汇报材料
2014/08/14 职场文书
甜品店创业计划书
2014/08/14 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
KTV员工管理制度
2015/08/06 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书