js 操作select相关方法函数


Posted in Javascript onDecember 06, 2009
1.判断select选项中 是否存在value="paravalue"的item
2.向select选项中 加入一个item
3.从select选项中 删除一个item
4.修改select选项中 value="paravalue"的text为"paratext"
5.设置select中text="paratext"的第一个item为选中
6.设置select中value="paravalue"的item为选中
7.得到select的当前选中项的value
8.得到select的当前选中项的text
9.得到select的当前选中项的index
10.清空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选项中 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中 不存在该项");
    }    
}//5.设置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中 不存在该项");
    }    
}
//6.设置select中value="paravalue"的item为选中
//document.all.objselect.value = objitemvalue;
//7.得到select的当前选中项的value
//var currselectvalue = document.all.objselect.value;
//8.得到select的当前选中项的text
//var currselecttext = document.all.objselect.options[document.all.objselect.selectedindex].text;
//9.得到select的当前选中项的index
//var currselectindex = document.all.objselect.selectedindex;
//10.清空select的项
// document.all.objselect.options.length = 0;
具体的实例可以查看js select多选列表传值代码
https://3water.com/article/21270.htm
Javascript 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
JavaScript 对象模型 执行模型
Dec 06 #Javascript
ASP Json Parser修正版
Dec 06 #Javascript
jquery ready函数源代码研究
Dec 06 #Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 #Javascript
javascript 动态生成私有变量访问器
Dec 06 #Javascript
JavaScript 加号(+)运算符号
Dec 06 #Javascript
javascript Demo模态窗口
Dec 06 #Javascript
You might like
PHP多个版本的分析解释
2011/07/21 PHP
PHP比你想象的好得多
2014/11/27 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
python实现四人制扑克牌游戏
2020/04/22 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
python下载的库包存放路径
2020/07/27 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
Java语言的优势
2015/01/10 面试题
企业管理毕业生求职信范文
2014/03/07 职场文书
调任通知
2015/04/21 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
2016中秋节广告语
2016/01/28 职场文书
七年级作文之秋游
2019/10/21 职场文书