コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

ドロップダウン ボックスで複数の選択を実装する単純なプラグインは、よりポータブルな_jquery

WBOY
リリース： 2016-05-16 16:49:59
オリジナル
918 人が閲覧しました

前回書いたmultiple-firstドロップダウンボックスを使ってみたところ、色々と問題点が見つかりましたが、修正・改良を重ねた結果、移植性も良く快適に使えるようになりました。 以下はソースコードです。

js

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

(関数(){

$.fn.extend({
checks_select: function(options){
jq_checks_select = null;
$(this).val("---選択してください- --" );
$(this).next().empty(); //最初は空です
$(this).unbind("click");
$(this).click( function(e ){
jq_check = $(this);
//jq_check.attr("class", "");
if (jq_checks_select == null) {
jq_checks_select = jq_check. next() ;
jq_checks_select.addClass("checks_div_select");
//jq_checks_select = $("
").insertAfter(jq_check); 🎜>$ .each(options, function(i, n){
check_div=$("
" n "" ).appendTo(jq_checks_select);
check_box=check_div.children();
check_box.click(function(e){
//jq_check.attr("value",$(this) .attr( "値") );

temp="";
$(this).parents().find("input:checked").each(function(i){
if( i==0){
temp=$(this).val();
}else{
temp ="," $(this).val();
});
//alert(temp);
e.stopPropagation()
}); jq_checks_select.show ();
}else{

}
e.stopPropagation()
}); .click( function () {
flag=$("#test_div");
if(flag.val()==""){
flag.val("---選択してください- --" );
}
jq_checks_select.hide();
});
//$(this).blur(function(){
//jq_checks_select.css("可視性", "非表示");
//alert();
//});
}
})

})(jQuery);


html




コードをコピー


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


.checks_div_select {
width: 150px;
border: 1px ソリッド
フォントファミリー: 'Verdana', '宋体';
フォントサイズ: 12px;
left:2px;
;/style>










関連ラベル：
ドロップダウンボックス 複数の選択肢
ソース：php.cn
前の記事：JQuery EasyUI 日付コントロールは日付選択をどのように制御しますか 次の記事：JavaScript がランダムなカラー サンプル コードを生成する_JavaScript スキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
固定配置された子によって親のパディングが無視される スティッキー要素がヘッダーの後ろに来るのを防ぐにはどうすればよいですか?現在のコードスニペットは親にpadding-topを使用しており、追加の子にmargin-topまたは透明な...
から 2024-04-06 11:42:51
0
1
338
Symfony 5 のカスタムデフォルト利用規約チェックボックス 私は symfony を初めて使用するので、登録ページを構築しようとしています。フォームとフィールドは FormType を通じて生成されますが、利用規約チェックボックスの外観を変...
から 2024-04-04 22:42:19
0
1
1365
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
ナビゲーションバーの中央のドロップダウンメニュー このCSS/HTMLを作りました。 .navbar{幅:100%;背景色:rgb(151,44,44);オーバーフロー:自動;}.navbara{border-right:1pxs...
から 2024-04-04 18:24:52
0
1
338
フォーカスが機能しないときに非表示を表示からブロックを表示に変更する 「searchbarinput」をクリックしたときに「searchbardropdown」を表示させようとしていますが、うまくいきません。何が起こっているのか知っている人はいますか...
から 2024-04-04 14:24:47
0
1
371
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート