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 相关文章推荐
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 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
php intval的测试代码发现问题
2008/07/27 PHP
关于尾递归的使用详解
2013/05/02 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
php写app用的框架整理
2019/09/29 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
PHP重载基础知识回顾
2020/09/10 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
js实现tab切换效果
2017/02/16 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
django之session与分页(实例讲解)
2017/11/13 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
如何让Java程序执行效率更高
2014/06/25 面试题
军训自我鉴定100字
2014/02/13 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
宣传委员竞选稿
2015/11/19 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP