jQuery select控制插件
更新時(shí)間:2009年08月17日 16:34:18 作者:
操作select下拉框的jquery插件,以后再涉及select時(shí),利用這個(gè)插件就簡(jiǎn)單多了。
和大家分享一下代碼:
JavaScript代碼
//得到select項(xiàng)的個(gè)數(shù)
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 "下拉框中無(wú)選項(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 "下拉框中無(wú)選中值";
}
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;
}
使用的時(shí)候先引入jquery.js文件,再引入jquery.liu.select.js文件,然后就可調(diào)用該插件的方法。比如,我要清除id為selEmail的下拉框中的所有項(xiàng),那么我就可以這么操作:$("#selEmail").clearAll();
說(shuō)明:該插件中的方法在ie7和firefox中驗(yàn)證通過(guò),有錯(cuò)誤和需要改進(jìn)的地方還希望大家批評(píng)指正。
JavaScript代碼
復(fù)制代碼 代碼如下:
//得到select項(xiàng)的個(gè)數(shù)
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 "下拉框中無(wú)選項(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 "下拉框中無(wú)選中值";
}
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;
}
使用的時(shí)候先引入jquery.js文件,再引入jquery.liu.select.js文件,然后就可調(diào)用該插件的方法。比如,我要清除id為selEmail的下拉框中的所有項(xiàng),那么我就可以這么操作:$("#selEmail").clearAll();
說(shuō)明:該插件中的方法在ie7和firefox中驗(yàn)證通過(guò),有錯(cuò)誤和需要改進(jìn)的地方還希望大家批評(píng)指正。
相關(guān)文章
jQuery EasyUI API 中文文檔 - EasyLoader 加載器
jQuery EasyUI API 中文文檔 - EasyLoader 加載器,使用jQuery EasyUI的朋友可以參考下。2011-09-09用jquery修復(fù)在iframe下的頁(yè)面錨點(diǎn)失效問(wèn)題
iframe頁(yè)面沒(méi)有滾動(dòng)條,在父窗體中出現(xiàn)滾動(dòng)條,錨點(diǎn)標(biāo)記就會(huì)失效,用js判斷頁(yè)面是否被嵌套,用js計(jì)算iframe在父窗體位置2014-08-08提示$ is not defined錯(cuò)誤分析及解決
$ is not defined這種提示想必在調(diào)試時(shí)經(jīng)常會(huì)遇到吧,經(jīng)過(guò)搜索查詢(xún)了一下結(jié)果是引入Jquery的順序不對(duì),改過(guò)來(lái)就可以了,有此問(wèn)題的朋友可以參考下哈2013-04-04jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊彈出漸變層的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊彈出漸變層的方法,jQuery是當(dāng)下最具人氣的JavaScript庫(kù),需要的朋友可以參考下2015-07-07jquery.autocomplete修改實(shí)現(xiàn)鍵盤(pán)上下鍵自動(dòng)填充示例
根據(jù)需求要實(shí)現(xiàn)通過(guò)鍵盤(pán)上下移動(dòng),獲得聯(lián)想菜單中的值,如同google baidu的查詢(xún)功能,下面的代碼是自己手寫(xiě)的,喜歡的朋友可以嘗試操作下2013-11-11jQuery實(shí)現(xiàn)本地預(yù)覽上傳圖片功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)本地預(yù)覽上傳圖片功能,為大家推薦了一款圖片上傳預(yù)覽插件,感興趣的小伙伴們可以參考一下2016-01-01jQuery通過(guò)deferred對(duì)象管理ajax異步
這篇文章主要介紹了jQuery通過(guò)deferred對(duì)象管理ajax異步的相關(guān)資料,需要的朋友可以參考下2016-05-05