您的位置:首页 > Web前端 > JQuery

结合jQuery扩展select标签操作

2010-12-27 13:14 323 查看
废话不多说了,直接贴代码吧

//*****************************操作select标签***********************//
// 得到select项的个数
jQuery.fn.size  = function(){
return jQuery(this).get(0).options.length;
}

// 获得选中项的索引
jQuery.fn.getSelectedIndex  = function(){
return jQuery(this).get(0).selectedIndex;
}

// 获得当前选中项的文本
jQuery.fn.getSelectedText=function(){
if (this.size()== 0)  return"下拉框中无选项";
else {
var  index = this.getSelectedIndex();
return jQuery(this).get(0).options[index].text;
}
}

// 获得当前选中项的值
jQuery.fn.getSelectedValue  = function(){
if (this.size() ==0)
return "下拉框中无选中值";

else
return jQuery(this).val();
}

//设置select中值为value的项为选中
jQuery.fn.setSelectedValue = function(value){
jQuery(this).get(0).value = value;
}

// 设置select中文本为text的第一项被选中
jQuery.fn.setSelectedText  = function(text)
{
var  isExist = false;
var  count = this.size();
for (var  i = 0;i < count;i ++)
{
if (jQuery(this).get(0).options[i].text == text)
{
jQuery(this).get(0).options[i].selected = true;
isExist = true;
break;
}
}
if (! isExist)
{
alert("下拉框中不存在该项");
}
}
//获取索引项为index的text
jQuery.fn.getText=function(index)
{
return jQuery(this).get(0).options[index].text;
}
// 设置选中指定索引项
jQuery.fn.setSelectedIndex  = function(index)
{
var  count = this.size();
if (index >= count || index < 0)
{
alert("选中项索引超出范围");
}
else
{
jQuery(this).get(0).selectedIndex =index;
}
}
// 判断select项中是否存在值为value的项
jQuery.fn.isExistItem  = function(value)
{
var  isExist = false;
var  count = this.size();
for (var  i = 0;i < count;i ++)
{
if (jQuery(this).get(0).options[i].value == value)
{
isExist = true;
break;
}
}
return  isExist;
}
// 向select中添加一项,显示内容为text,值为value,如果该项值已存在,则提示
jQuery.fn.addOption  = function(text,value)
{
if (this .isExistItem(value))
{
alert("待添加项的值已存在");
}
else
{
jQuery(this).get(0).options.add(new Option(text,value));
}
}
// 删除select中值为value的项,如果该项不存在,则提示
jQuery.fn.removeItem  = function(value)
{
if (this .isExistItem(value))
{
var  count = this.size();
for (var i=0;i <count; i++)
{
if (jQuery(this).get(0).options[i].value == value)
{
jQuery(this).get(0).remove(i);
break;
}
}
}
else
{
alert("待删除的项不存在!");
}
}
// 删除select中指定索引的项
jQuery.fn.removeIndex  = function(index)
{
var  count = this .size();
if(index  >=  count  ||  index  <   0)
{
alert("待删除项索引超出范围");
}
else
{
jQuery(this).get(0).remove(index);
}
}
//删除select中选定的项
jQuery.fn.removeSelected  = function()
{
var  index = this .getSelectedIndex();
this .removeIndex(index);
}
//清除select中的所有项
jQuery.fn.clearAll=function()
{
jQuery(this).get(0).options.length = 0;
}


当然这里只有部分操作,如果你想添加更多的功能就自己动手扩展一下吧,那样你会学到很多东西的

还有就是命名,希望命名为“jquery.select.js”,一目了然

实际应用的话,当然先要把jQuery库包含到项目或者说是网页中了
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: