jquery_jquery に基づく複数選択可能なドロップダウン リスト ボックス

同僚は、インターネット上でドロップダウン リスト ボックスの位置の誤りや読み込みの遅さなどのバグを発見しました。とにかく、複数選択のドロップダウン リスト ボックスの実装は、複雑な構造ではなく、非常にシンプルです。コードを再実装することをお勧めします。

最初に効果を見てください: http://demo.jb51.net/js/2012/jquery_demo/jquery_select.html

JS:

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

(function ($) {
$.fn.extend ({
MultDropList: function (options) {
var op = $.extend({ WraperClass: "wrapper", width: "150px", height: "200px", data: "", selected: "" }, options);
return this.each(function () {
var $this = $(this); //TextBox へのポイント
var $hf = $(this).next(); //非表示のコントロール ストレージへのポイント
var conSelector = "#" $this.attr("id") ",#" $hf.attr("id")
var $wrapper = $(conSelector); .wrapAll("

").parent().parent().addClass(op.wrapperClass);
var $list = $('

').appendTo($wrapper);
$list.css({ "width": op.width, "height": op.height }) ;
//ポップアップ ページの表示と非表示を制御します
$this.click(function (e) {
$list.toggle();
e.stopPropagation();
} );
$(ドキュメント ).click(function () {
$list.hide();
});
$list.filter("*").click(function (e) ) {
e.stopPropagation ();
});
//デフォルトデータをロードします
$list.append('

• すべて

');
var $ul = $list.find("ul") ;
//json データの読み込み
var listArr = op.data.split("|");
var jsonData;
for (var i = 0; i jsonData = eval("(" listArr[i] ")");
$ul.append('

');
}
//チェックオプションをロードします
var seledArr;
if ( op.selected.length > 0 ) {
seledArr = selected.split(",");
else {
seledArr = $hf.val().split("," );
}
$.each(seledArr, function (index) {
$("li input[value='" seledArr[index] "']", $ul).attr("checked ", "checked");
var vArr = new Array();
$("input[class!='selectAll']:checked", $ul).each(function (index) {
vArr[インデックス] = $(this).next().text();
$this.val(",");
//すべて選択またはすべてを選択 Uncheck
$("li:first input", $ul).click(function () {
if ($(this).attr("checked")) {
$("li input ", $ul).attr("checked", "checked");
}
else {
$("li input", $ul).removeAttr(" selected");
}
});
//他のチェックボックスをクリックすると、非表示のコントロールの値とテキストボックスの値が更新されます
$("input", $ul)。 click(function () {
var kArr = new Array();
var vArr = new Array();
$("input[class!='selectAll']:checked", $ul) .each(function (index) {
kArr[index] = $(this).val();
vArr[index] = $(this).next().text();
} );
$hf.val (kArr.join(","));
}
}) ;
})(jQuery);
$(document).ready(function () {
$("#txtTest").MultDropList({ data: $ ("#hfddlList").val( ) });



CSS:




コードをコピーします

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

.wrapper { 位置: } 。リスト

{

幅: 200 ピクセル;
高さ: 200 ピクセル;
位置: 絶対;
表示: なし;
背景: なし繰り返しスクロール 0 0 #F0F6E4 ;
float: left;
}
.list ul li
{
padding-left: 10px; : 2px;
padding-bottom: 2px;
border-top: 1px ソリッドブラック
}
list-style:none 外側
}


HTML:




コードをコピー


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

;div style="margin-left: 300px; height: 30px;">