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 相关文章推荐
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
js实现简单的验证码
Dec 25 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
JS将unicode码转中文方法
May 08 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 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常用的安全过滤函数集锦
2014/10/09 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
Python使用贪婪算法解决问题
2019/10/22 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
Python实现扫码工具的示例代码
2020/10/09 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
2015年元旦文艺汇演主持词
2014/03/26 职场文书
西双版纳导游词
2015/02/03 职场文书
2015年信访工作总结
2015/04/07 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
运动会通讯稿600字
2015/07/20 职场文书