jquery_jquery를 기반으로 하는 다중 선택 가능한 드롭다운 목록 상자

동료들은 인터넷에서 찾은 드롭다운 목록 상자에서 잘못된 위치 지정 및 느린 로딩 등의 버그를 발견했습니다. 어쨌든 다중 선택 드롭다운 목록 상자의 구현은 지저분한 구조를 보는 대신 매우 간단합니다. 코드를 직접 다시 구현하는 것이 좋습니다.

효과 먼저 살펴보기: http://demo.jb51.net/js/2012/jquery_demo/jquery_select.html

JS:

코드 복사 코드는 다음과 같습니다.

(function ($) {
$.fn.extend ({
MultDropList: 함수(옵션) {
var op = $.extend({ 래퍼 클래스: "래퍼", 너비: "150px", 높이: "200px", 데이터: "", 선택됨: "" }, 옵션);
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();
} );
$(document ).click(function () {
$list.hide();
})
$list.filter("*").click(function (e) ) {
e.stopPropagation ();
})
//기본 데이터 로드
$list.append('

• All

')
var $ul = $list.find("ul") ;
//json 데이터 로드
var listArr = op.data.split("|")
var jsonData
for (var i = 0; i < listArr.length; i ) {
jsonData = eval("(" listArr[i] ")")
$ul.append('

' jsonData.v '

');
}
//검사 옵션 로드
var seledArr;
if ( op.selected.length > 0 ) {
seledArr = selected.split(",")
}
else {
seledArr = $hf.val().split("," );
}
$.each(seledArr, 함수(색인) {
$("li input[value='" seledArr[index] "']", $ul).attr("checked ", "checked");
var vArr = new Array();
$("input[class!='selectAll']:checked", $ul).each(function (index) {
vArr[index] = $( this).next().text();
})
$this.val(vArr.join(","))
}) 🎜>//전체 또는 모두 선택 선택 취소
$("li:first input", $ul).click(function () {
if ($(this).attr("checked")) {
$("li 입력 ", $ul).attr("checked", "checked");
}
else {
$("li 입력", $ul).removeAttr(" selected");
}
});
//다른 확인란을 클릭할 때 숨겨진 컨트롤 값과 텍스트 상자 값
$("input", $ul)을 업데이트합니다. click(function () {
var kArr = new Array();
var vArr = new Array();
$("input[class!='selectAll']:checked", $ul) .each(함수(색인) {
kArr[index] = $(this).val();
vArr[index] = $(this).next().text();
} );
$hf.val (kArr.join(","));
$this.val(vArr.join(","))
});
}
}) ;
})(jQuery)
$(document).ready(function () {
$("#txtTest").MultDropList({ 데이터: $ ("#hfddlList").val( ) });



CSS:

코드 복사

코드는 .wrapper {

위치:

}
입니다. 목록
{
폭: 200px;
오버플로: 자동;
경계: 1px 솔리드
표시: 없음;
배경: 없음 반복 스크롤 0 0 #F0F6E4 ;
float: 왼쪽
}
.list ul li
{
padding-left: 10px; : 2px;
padding-bottom: 2px;
border-top: 1px solid black;
}
ul
{
list-style:none 외부 없음;


HTML:




코드 복사

코드는 다음과 같습니다.

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