เมื่อฉันใช้กล่องดรอปดาวน์หลายครั้งที่ฉันเขียนครั้งสุดท้ายฉันพบปัญหามากมาย หลังจากการดัดแปลงและปรับปรุงตอนนี้สามารถใช้งานได้ดีและมีพกพาได้ดี ต่อไปนี้เป็นซอร์สโค้ด
JS
การคัดลอกรหัสมีดังนี้:
(การทำงาน(){
$ .fn.extend ({
checks_select: ฟังก์ชั่น (ตัวเลือก) {
jq_checks_select = null;
$ (นี่) .val ("--- โปรดเลือก ---");
$ (นี่) .next (). ว่าง (); // ล้างก่อน
$ (นี่) .UNBIND ("คลิก");
$ (นี่) .lick (ฟังก์ชั่น (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'> </div>"). insertfter (jq_check);
$ .Each (ตัวเลือก, ฟังก์ชั่น (i, n) {
check_div = $ ("<div> <อินพุต type = 'ช่องทำเครื่องหมาย' value = '" + n + "'>" + n + "</div>"). ภาคผนวก (jq_checks_select);
check_box = check_div.children ();
check_box.click (ฟังก์ชั่น (e) {
//jq_check.attr("value",$( นี่).attr("value "));
อุณหภูมิ = "";
$ (นี่) .parents (). ค้นหา ("อินพุต: ตรวจสอบ") แต่ละ (ฟังก์ชั่น (i) {
ถ้า (i == 0) {
temp = $ (this) .val ();
}อื่น{
temp+= ","+$ (นี่) .val ();
-
-
// การแจ้งเตือน (อุณหภูมิ);
jq_check.val (อุณหภูมิ);
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 ();
-
// $ (นี่) .blur (function () {
//JQ_CHECKS_SELECT.CS ("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>
<ภาษาสคริปต์ = "JavaScript">
$ (เอกสาร) .ready (function () {
ตัวเลือก var = {
1: "การเลือกครั้งแรก",
2: "ตัวเลือกที่สอง",
3: "ตัวเลือกที่สาม",
4: "ตัวเลือกที่สี่",
5: "ตัวเลือกที่ห้า",
6: "ตัวเลือกที่หก"
-
$ ("#test_div"). checks_select (ตัวเลือก);
-
</script>
<style>
.checks_div_select {
ความกว้าง: 150px;
พื้นหลังสี: #E9FBFB;
ชายแดน: 1px Solid #18CBCD;
Font-Family: 'Verdana', 'Song-Style';
ขนาดตัวอักษร: 12px;
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 2px;
ด้านบน: 25px;
-
</style>
</head>
<body>
<div style = "ตำแหน่ง: ญาติ">
<อินพุต type = "text" id = "test_div" readonly = "อ่านอย่างง่าย"/>
<div> </div>
</div>
</body>
</html>