عندما استخدمت المربع المنسدل متعدد الحالات التي كتبت في المرة الأخيرة ، وجدت الكثير من المشكلات. بعد التعديل والتحسين ، يمكن الآن استخدامه بشكل جيد وله قابلية جيدة. ما يلي هو رمز المصدر.
JS
نسخة الكود كما يلي:
(وظيفة(){
$ .fn.extend ({
checks_select: وظيفة (خيارات) {
jq_checks_select = null ؛
$ (هذا) .val ("--- يرجى تحديد ---") ؛
$ (هذا) .next (). فارغ () ؛ // واضح أولاً
$ (this) .Unbind ("Click") ؛
$ (هذا). انقر (وظيفة (e) {
jq_check = $ (هذا) ؛
//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'> </viv>"). insertAfter (jq_check) ؛
$ .each (الخيارات ، الوظيفة (i ، n) {
check_div = $ ("<viv> <input type = 'checkbox' value = '" + n + "'>" + n + "</viv>"). appendto (jq_checks_select) ؛
check_box = check_div.children () ؛
check_box.click (function (e) {
//jq_check.attr("value" ، $ (this).attr("value ")) ؛
temp = "" ؛
$ (this) .parents ().
إذا (i == 0) {
temp = $ (this) .val () ؛
}آخر{
temp+= "،"+$ (this) .val () ؛
}
}) ؛
// تنبيه (درجة الحرارة) ؛
jq_check.val (temp) ؛
E.StopPropagation () ؛
}) ؛
}) ؛
jq_checks_select.show () ؛
}آخر{
jq_checks_select.toggle () ؛
}
E.StopPropagation () ؛
}) ؛
$ (وثيقة) .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>
<head>
<script type = "text/javaScript" src = "js/jquery.js">
</script>
<script type = "text/javaScript" src = "js/jquery_mutili.js">
</script>
<script language = "javaScript">
$ (وثيقة). ready (function () {
خيارات var = {
1: "الاختيار الأول" ،
2: "الخيار الثاني" ،
3: "الخيار الثالث" ،
4: "الخيار الرابع" ،
5: "الخيار الخامس" ،
6: "الخيار السادس"
} ؛
$ ("#test_div"). checks_select (خيارات) ؛
}) ؛
</script>
<style>
.CHECKS_DIV_SELECT {
العرض: 150 بكسل ؛
خلفية اللون: #e9fbfb ؛
الحدود: 1 بكسل Solid #18CBCD ؛
Font-Family: 'Verdana' ، 'Stons-Style' ؛
حجم الخط: 12 بكسل ؛
الموقف: مطلق ؛
اليسار: 2px ؛
أعلى: 25 بكسل ؛
}
</style>
</head>
<body>
<div style = "الموضع: قريب ؛">
<type type = "text" id = "test_div" readOnly = "readonly"/>
<viv> </viv>
</div>
</body>
</html>