当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Jquery操作Select 简单方便 一个js插件搞定

Javascript
用Javascript实现锚点(Anchor)间平滑跳转
实现png图片和png背景透明(支持多浏览器)的方法
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
用DIV完美模拟createPopup 弹出窗口(修正版),支持Firefox,ie,chrome
JavaScript 中级笔记 第一章
IE与Firefox在JavaScript上的7个不同写法小结
MooTools 1.2介绍
Mootools 1.2教程(2) DOM选择器
Mootools 1.2教程(3) 数组使用简介
在IE下获取object(ActiveX)的Param的代码
ExtJS 配置和表格控件使用
javascript 缓冲效果实现代码 推荐
html数组字符串拼接的最快方法
JavaScript 浮动定位提示效果实现代码
类似CSDN图片切换效果脚本
javascript 面向对象编程 function也是类
javascript 面向对象编程 聊聊对象的事
javascript 面向对象编程 function是方法(函数)
[原创]基于innerHTML中的script广告实现代码[广告全部放在一个js里面]
jQuery slider Content(左右控制移动)

Javascript 中的 Jquery操作Select 简单方便 一个js插件搞定


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 200 ::
收藏到网摘: n/a

Jquery其实本身可以操作select表单,但是由于比较反锁,没有.net 控件那样去操作方便,我在网上Google了一会,发现了一个不错的专门操作select的插件,很好,使用过了,感觉蛮不错的。 这里是js的代码:
复制代码 代码如下:

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("下拉框中不存在该项");
}
}
//设置选中指定索引项
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.js
然后再引入这个js文件,然后你就可以使用这些方法了