Ketika saya menggunakan kotak drop-down multi-pertama yang saya tulis terakhir kali, saya menemukan banyak masalah. Setelah modifikasi dan peningkatan, sekarang dapat digunakan dengan baik dan memiliki portabilitas yang baik. Berikut ini adalah kode sumber.
JS
Salinan kode adalah sebagai berikut:
(fungsi(){
$ .fn.extend ({
checks_select: function (opsi) {
jq_checks_select = null;
$ (ini) .val ("--- Pilih ---");
$ (this) .next (). empted (); // Bersihkan dulu
$ (ini) .unbind ("klik");
$ (this) .click (function (e) {
jq_check = $ (ini);
//jq_check.attr("class "," ");
if (jq_checks_select == null) {
jq_checks_select = jq_check.next ();
jq_checks_select.addclass ("check_div_select");
// jq_checks_select = $ ("<div class = 'check_div_select'> </div>"). insertAfter (jq_check);
$ .each (opsi, fungsi (i, n) {
check_div = $ ("<div> <input type = 'checkbox' value = '" + n + "'>" + n + "</div>"). appendTo (jq_checks_select);
check_box = check_div.children ();
check_box.click (function (e) {
//jq_check.attr("value",$(this).attr("value "));
temp = "";
$ (ini) .parents (). find ("input: checked"). masing -masing (fungsi (i) {
if (i == 0) {
temp = $ (ini) .val ();
}kalau tidak{
temp+= ","+$ (ini) .val ();
}
});
// peringatan (temp);
jq_check.val (temp);
e.Stoppropagation ();
});
});
jq_checks_select.show ();
}kalau tidak{
jq_checks_select.toggle ();
}
e.Stoppropagation ();
});
$ (dokumen) .click (function () {
flag = $ ("#test_div");
if (flag.val () == "") {
flag.val ("--- Pilih ---");
}
jq_checks_select.hide ();
});
// $ (this) .blur (function () {
//jq_checks_select.css("visibility","hidden ");
//peringatan();
//});
}
})
}) (jQuery);
html
Salinan kode adalah sebagai berikut:
<Html>
<head>
<type skrip = "Text/JavaScript" src = "js/jQuery.js">
</script>
<type skrip = "text/javascript" src = "js/jquery_mutili.js">
</script>
<bahasa skrip = "javascript">
$ (dokumen) .ready (function () {
var options = {
1: "Seleksi Pertama",
2: "Opsi Kedua",
3: "Opsi Ketiga",
4: "Opsi Keempat",
5: "Opsi Kelima",
6: "Opsi Keenam"
};
$ ("#test_div"). checks_select (opsi);
});
</script>
<tyle>
.checks_div_select {
Lebar: 150px;
latar belakang-warna: #e9fbfb;
Perbatasan: 1px Solid #18CBCD;
Font-Family: 'Verdana', 'Song-style';
font-size: 12px;
Posisi: Absolute;
Kiri: 2px;
Atas: 25px;
}
</tyle>
</head>
<body>
<Div style = "Posisi: relatif;">
<input type = "text" id = "test_div" readonly = "readonly"/>
<div> </div>
</div>
</body>
</html>