ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery 選択コントロール plug-in_jquery

jQuery 選択コントロール plug-in_jquery

WBOY
リリース: 2016-05-16 18:48:05
オリジナル
928 人が閲覧しました

コードを全員と共有します:
JavaScript コード

コードをコピー コードは次のとおりです:

/ /選択項目の数を取得します
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
{
varindex = this.getSelectedIndex();
return jQuery(this).get(0).options[index] .text;
}
}
//現在選択されている項目の値を取得します
jQuery.fn.getSelectedValue = function()
{
if(this.size() == 0)
{
return "ドロップダウン ボックスに選択された値がありません";
}
else
{
return jQuery(this).val() ;
}
}
//設定値 value を持つ項目が選択されます
jQuery.fn.setSelectedValue = function(value)
{
jQuery(this).get( 0).value = value;
}
// select 内のテキストを含む最初の項目を選択するように設定します
jQuery.fn.setSelectedText = function(text)
{
var isExist = false;
var count = this.size();
for(var i=0;i{
if(jQuery(this).get(0).options [i].text == text)
{
jQuery(this).get(0).options[i].selected = true;
isExist = true; }
}
if(!isExist)
{
alert("この項目はドロップダウン ボックスに存在しません")
}
}
//選択したインデックス項目を設定します
jQuery.fn.setSelectedIndex = function(index)
{
var count = this.size();
if(index >= count || Index < 0) )
{
alert("選択された項目のインデックスが範囲外です");
}
else
{
jQuery(this).get(0).selectedIndex = インデックス;
}
}
//値の項目
jQuery.fn.isExistItem = function(value)
{
var isExist = false;
var count = this.size();
for(var i=0; i{
if(jQuery(this).get(0). options[i].value == value)
{
isExist = true;
}
}
return
}
//追加項目を選択する場合、表示内容はテキストで、値は value です。項目の値がすでに存在する場合は、
jQuery.fn.addOption = function(text,value)
{
if (this.isExistItem(value))
{
alert("追加する項目の値は既に存在します")
}
else
{
jQuery(this); .get(0).options.add(new Option(text,value));
}
}
/ / 項目が存在しない場合は、プロンプトを表示します。 🎜>jQuery.fn.removeItem = function(value)
{
if(this.isExistItem(value))
{
var count = this.size();
for(var) i=0;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 {
alert("削除される項目のインデックスが範囲外です"); else
{
jQuery(this).get(0).remove(index);
}
}
//select で選択した項目を削除
jQuery.fn.removeSelected = function()
{
varindex = this.getSelectedIndex();
this.removeIndex(index);
//select
jQuery.fn 内のすべての項目をクリアします.clearAll = function()
{
jQuery(this).get(0).options.length = 0;
}


使用する場合は、まず jQuery をインポートします.js ファイルをインポートし、jquery.liu.select.js ファイルをインポートして、プラグイン メソッドを呼び出します。たとえば、ID selEmail のドロップダウン ボックス内のすべての項目をクリアしたい場合は、次のように実行できます。 $("#selEmail").clearAll(); 注: このプラグインのメソッド-in は ie7 と Firefox で利用可能です 検証はパスしました 間違いや改善が必要な箇所があれば、ご批判、修正していただければ幸いです。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート