シンプルな jquery の複数選択ドロップダウンボックス (自作)

シンプルな jquery の複数選択ドロップダウンボックス (自作)_jquery

WBOY

リリース： 2016-05-16 16:50:00

オリジナル

1287 人が閲覧しました

今日取り組んでいたプロジェクトでは、複数選択のドロップダウンボックスを使用する必要があったので、それを使用するためにインターネットでプラグインを見つけようとしましたが、インターネット上のプラグインは非常に面倒に思えました。インターネット上のいくつかのプラグインを参照し、jquery を使用して複数選択プラグインを作成しました。ドロップダウンボックスは js で比較的簡潔に記述されています。コードは次のとおりです。

js コード

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

( function() {
$.fn.extend({
checks_select: function(options){
jq_checks_select = null;
$(this).click(function(e){
jq_check = $( this);
//jq_check.attr("class", "");
if (jq_checks_select == null) {
jq_checks_select = $("

< ;/div>").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("値",$(this).attr("値") );

temp="";
$("input:checked").each( function(i ){
if(i==0){
temp=$(this).attr("value");
}else{
temp="," $(this ).attr ("値");
jq_check.attr("値",
}); >}) ;
}else{

}
$(ドキュメント); (function ( ) {
jq_checks_select.hide();
});
//$(this).blur(function(){
//jq_checks_select.css("可視性"," hidden") ;
//alert();
//});
}
})

})(jQuery);

html

コードをコピー

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

/javascript" src=" js/jquery2.1.js"> style>
.checks_div_select {
width: 150px;
background-color: #e9fbfb;
border: 'Verdana' , '宋体';
フォントサイズ: 12px;
位置:絶対;
上:25px;

jquery ライブラリが必要です