Jquery操作Select 簡單方便 一個js插件搞定
更新時間:2009年11月12日 22:33:31 作者:
Jquery其實(shí)本身可以操作select表單,但是由于比較反鎖,沒有.net 控件那樣去操作方便,我在網(wǎng)上Google了一會,發(fā)現(xiàn)了一個不錯的專門操作select的插件,很好,使用過了,感覺蠻不錯的。
這里是js的代碼:
jQuery.fn.size = function()
{
return jQuery(this).get(0).options.length;
}
//獲得選中項(xiàng)的索引
jQuery.fn.getSelectedIndex = function()
{
return jQuery(this).get(0).selectedIndex;
}
//獲得當(dāng)前選中項(xiàng)的文本
jQuery.fn.getSelectedText = function()
{
if(this.size() == 0)
{
return "下拉框中無選項(xiàng)";
}
else
{
var index = this.getSelectedIndex();
return jQuery(this).get(0).options[index].text;
}
}
//獲得當(dāng)前選中項(xiàng)的值
jQuery.fn.getSelectedValue = function()
{
if(this.size() == 0)
{
return "下拉框中無選中值";
}
else
{
return jQuery(this).val();
}
}
//設(shè)置select中值為value的項(xiàng)為選中
jQuery.fn.setSelectedValue = function(value)
{
jQuery(this).get(0).value = value;
}
//設(shè)置select中文本為text的第一項(xiàng)被選中
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("下拉框中不存在該項(xiàng)");
}
}
//設(shè)置選中指定索引項(xiàng)
jQuery.fn.setSelectedIndex = function(index)
{
var count = this.size();
if(index >= count || index < 0)
{
alert("選中項(xiàng)索引超出范圍");
}
else
{
jQuery(this).get(0).selectedIndex = index;
}
}
//判斷select項(xiàng)中是否存在值為value的項(xiàng)
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中添加一項(xiàng),顯示內(nèi)容為text,值為value,如果該項(xiàng)值已存在,則提示
jQuery.fn.addOption = function(text,value)
{
if(this.isExistItem(value))
{
alert("待添加項(xiàng)的值已存在");
}
else
{
jQuery(this).get(0).options.add(new Option(text,value));
}
}
//刪除select中值為value的項(xiàng),如果該項(xiàng)不存在,則提示
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("待刪除的項(xiàng)不存在!");
}
}
//刪除select中指定索引的項(xiàng)
jQuery.fn.removeIndex = function(index)
{
var count = this.size();
if(index >= count || index < 0)
{
alert("待刪除項(xiàng)索引超出范圍");
}
else
{
jQuery(this).get(0).remove(index);
}
}
//刪除select中選定的項(xiàng)
jQuery.fn.removeSelected = function()
{
var index = this.getSelectedIndex();
this.removeIndex(index);
}
//清除select中的所有項(xiàng)
jQuery.fn.clearAll = function()
{
jQuery(this).get(0).options.length = 0;
}
使用很簡單,先引入主要的Jquery.js
然后再引入這個js文件,然后你就可以使用這些方法了
復(fù)制代碼 代碼如下:
jQuery.fn.size = function()
{
return jQuery(this).get(0).options.length;
}
//獲得選中項(xiàng)的索引
jQuery.fn.getSelectedIndex = function()
{
return jQuery(this).get(0).selectedIndex;
}
//獲得當(dāng)前選中項(xiàng)的文本
jQuery.fn.getSelectedText = function()
{
if(this.size() == 0)
{
return "下拉框中無選項(xiàng)";
}
else
{
var index = this.getSelectedIndex();
return jQuery(this).get(0).options[index].text;
}
}
//獲得當(dāng)前選中項(xiàng)的值
jQuery.fn.getSelectedValue = function()
{
if(this.size() == 0)
{
return "下拉框中無選中值";
}
else
{
return jQuery(this).val();
}
}
//設(shè)置select中值為value的項(xiàng)為選中
jQuery.fn.setSelectedValue = function(value)
{
jQuery(this).get(0).value = value;
}
//設(shè)置select中文本為text的第一項(xiàng)被選中
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("下拉框中不存在該項(xiàng)");
}
}
//設(shè)置選中指定索引項(xiàng)
jQuery.fn.setSelectedIndex = function(index)
{
var count = this.size();
if(index >= count || index < 0)
{
alert("選中項(xiàng)索引超出范圍");
}
else
{
jQuery(this).get(0).selectedIndex = index;
}
}
//判斷select項(xiàng)中是否存在值為value的項(xiàng)
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中添加一項(xiàng),顯示內(nèi)容為text,值為value,如果該項(xiàng)值已存在,則提示
jQuery.fn.addOption = function(text,value)
{
if(this.isExistItem(value))
{
alert("待添加項(xiàng)的值已存在");
}
else
{
jQuery(this).get(0).options.add(new Option(text,value));
}
}
//刪除select中值為value的項(xiàng),如果該項(xiàng)不存在,則提示
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("待刪除的項(xiàng)不存在!");
}
}
//刪除select中指定索引的項(xiàng)
jQuery.fn.removeIndex = function(index)
{
var count = this.size();
if(index >= count || index < 0)
{
alert("待刪除項(xiàng)索引超出范圍");
}
else
{
jQuery(this).get(0).remove(index);
}
}
//刪除select中選定的項(xiàng)
jQuery.fn.removeSelected = function()
{
var index = this.getSelectedIndex();
this.removeIndex(index);
}
//清除select中的所有項(xiàng)
jQuery.fn.clearAll = function()
{
jQuery(this).get(0).options.length = 0;
}
使用很簡單,先引入主要的Jquery.js
然后再引入這個js文件,然后你就可以使用這些方法了
相關(guān)文章
jQuery+ajax實(shí)現(xiàn)修改密碼驗(yàn)證功能實(shí)例詳解
本文通過實(shí)例代碼給大家介紹了jQuery+ajax實(shí)現(xiàn)修改密碼驗(yàn)證功能,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的的朋友參考下吧2017-07-07Jquery實(shí)現(xiàn)的table最后一行添加樣式的代碼
有時間需要將表格的最后一行加上樣式,方便閱讀等需要,需要的朋友可以參考下。2010-05-05jquery 無限級下拉菜單的簡單實(shí)現(xiàn)代碼
本篇文章主要是對jquery 無限級下拉菜單的簡單實(shí)現(xiàn)代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02