지난번에 쓴 멀티 우선 드롭 다운 상자를 사용했을 때 많은 문제가 발견되었습니다. 수정 및 개선 후에는 이제 잘 사용될 수 있으며 휴대 성이 우수합니다. 다음은 소스 코드입니다.
JS
코드 사본은 다음과 같습니다.
(기능(){
$ .fn.extend ({
Checks_Select : 함수 (옵션) {
jq_checks_select = null;
$ (this) .val ( "--- 선택 ---");
$ (this) .next (). empty (); // 먼저 지우십시오
$ (this) .unbind ( "클릭");
$ (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 = $ ( "<div class = 'checks_div_select'> </div>"). insertAfter (jq_check);
$ .Each (옵션, 기능 (i, n) {
check_div = $ ( "<div> <input type = 'checkbox'value = ' + n +"'> " + n +"</div> "). 부록 (jq_checks_select);
check_box = check_div.children ();
check_box.click (function (e) {
//jq_check.attr("value",$(this).attr("value "));
온도 = "";
$ (this) .parents (). find ( "input : checked"). 각 (function (i) {
if (i == 0) {
temp = $ (this) .val ();
}또 다른{
temp+= ","+$ (this) .val ();
}
});
// 경고 (임시);
jq_check.val (temp);
E.StopPropagation ();
});
});
jq_checks_select.show ();
}또 다른{
jq_checks_select.toggle ();
}
E.StopPropagation ();
});
$ (document) .click (function () {
flag = $ ( "#test_div");
if (flag.val () == "") {
flag.val ( "--- 선택 ---");
}
jq_checks_select.hide ();
});
// $ (this) .Blur (function () {
//jq_checks_select.css("visibility","hidden ");
//알리다();
//});
}
})
}) (jQuery);
HTML
코드 사본은 다음과 같습니다.
<html>
<헤드>
<script type = "text/javaScript"src = "js/jquery.js">
</스크립트>
<script type = "text/javaScript"src = "js/jquery_mutili.js">
</스크립트>
<script language = "javaScript">
$ (document) .ready (function () {
var 옵션 = {
1 : "첫 번째 선택",
2 : "두 번째 옵션",
3 : "세 번째 옵션",
4 : "네 번째 옵션",
5 : "다섯 번째 옵션",
6 : "여섯 번째 옵션"
};
$ ( "#test_div"). checks_select (옵션);
});
</스크립트>
<스타일>
.checks_div_select {
너비 : 150px;
배경색 : #e9fbfb;
국경 : 1px Solid #18CBCD;
Font-Family : 'Verdana', '노래 스타일';
글꼴 크기 : 12px;
위치 : 절대;
왼쪽 : 2px;
상단 : 25px;
}
</스타일>
</head>
<body>
<div style = "위치 : 상대;">
<input type = "text"id = "test_div"readonly = "readonly"/>
<div> </div>
</div>
</body>
</html>