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中的107个基础知识收集整理 推荐
Mar 29 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
详解JavaScript中的this指向问题
Feb 05 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 sprintf()函数让你的sql操作更安全
2008/07/23 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
应届生英语教师求职信
2013/11/05 职场文书
企业文化演讲稿
2014/05/20 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
学生打架检讨书
2014/10/20 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
原告代理词范文
2015/05/25 职场文书
老人与海读书笔记
2015/06/26 职场文书
超市店长竞聘书
2015/09/15 职场文书
python 爬取天气网卫星图片
2021/06/07 Python
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android