关于用Js编写Select元素操作option的通用代码

来源:互联网 发布:华育软件实训靠谱吗 编辑:程序博客网 时间:2024/05/17 07:39

由于工作的原因,经常遇到在web应用的前端页面中,需要使用javascript来操作一些HTML元素,如Select的Options,但是,经过网上搜索出来的现成代码,发现不是copy别人的就是非常繁琐的,那个累人阿。

原本简单的事情,经过这一遭,花了我不少时间,所以,决定自己写一个通用,简单的,留给自己以后备用。

 

以下是本人经过测试(主要是IE)的代码

 

注意:有很多的做法是,获取对象,历遍,判断,这是个正路的方法,但我懒,上代码:

//获取对象的通用方法

function _$(objid)
{
 return document.getElementById(objid);
}

 

//判断option是否选中

function opt_isselected(objid)
{
 var select_obj = _$(objid);
 if(select_obj.options.selectedIndex > -1)  //这里index的索引是从0开始的
  return true
 else
  alert('Please select option item.');
  return false;
}

 

//返回当前选中的option的值

function select_getvalue(objid)
{
 var select_obj = _$(objid);

 if(opt_isselected(objid))
 {
  return select_obj.options[select_obj.options.selectedIndex].value;
 }
}

 

//向select元素添加option的通用方法

function select_add(objid, optname, optvalue)
{
 var select_obj = _$(objid);
 select_obj.options.add(new Option(optname, optvalue));
}

 

//删除当前选中的option

function select_remove(objid)
{
 var select_obj = _$(objid);

 if(opt_isselected(objid))
 {
  select_obj.options.remove(select_obj.options.selectedIndex);
 }
}

 

//清空select元素的所有option

function select_cleanup(objid)
{
 var select_obj = _$(objid);
 select_obj.options.length = 0;
}

 

//更新当前选中的option的值

function select_update(objid, value)
{
 var select_obj = _$(objid);
 select_obj.options[select_obj.options.selectedIndex].value = value;
 select_obj.options[select_obj.options.selectedIndex].text = value;
}

 

wow,写完了,看看,功能已经测试过,代码不多,看着多舒服啊(总比看一股脑子的for循环好吧)。

好了,收工。

 

0 0
原创粉丝点击