Als ich das multi-firstige Dropdown-Box benutzte, das ich letztes Mal geschrieben habe, fand ich viele Probleme. Nach der Änderung und Verbesserung kann es jetzt gut verwendet werden und hat eine gute Portabilität. Das Folgende ist der Quellcode.
JS
Die Codekopie lautet wie folgt:
(Funktion(){
$ .fn.extend ({{
checks_select: function (option) {
jq_checks_select = null;
$ (this) .val ("--- bitte auswählen ---");
$ (this) .Next (). leer (); // zuerst klar
$ (this) .unbind ("click");
$ (this) .click (Funktion (e) {
JQ_Check = $ (this);
//jq_check.attr("Class "," ");
if (jq_checks_select == null) {
jq_checks_select = jq_check.next ();
jq_checks_select.addClass ("pircs_div_select");
// JQ_Checks_Select = $ ("<div class = 'schecks_div_select'> </div>"). InsertAfter (jq_check);
$ .each (Optionen, Funktion (i, n) {
check_div = $ ("<Div> <Eingabe type = 'CheckBox' value = '" + n + "'>" + n + "</div>"). appendTo (jq_checks_select);
check_box = check_div.children ();
check_box.click (Funktion (e) {
//jq_check.attr("Value" $(This).attr("Value "));
temp = "";
$ (this) .Parents (). Find ("Eingabe: geprüft"). Jede (Funktion (i) {
if (i == 0) {
temp = $ (this) .val ();
}anders{
temp+= ","+$ (this) .val ();
}
});
// alarm (temp);
jq_check.val (temp);
E.Stoppropagation ();
});
});
jq_checks_select.show ();
}anders{
jq_checks_select.toggle ();
}
E.Stoppropagation ();
});
$ (Dokument) .click (function () {
Flag = $ ("#test_div");
if (flag.val () == "") {
Flag.val ("--- bitte auswählen ---");
}
jq_checks_select.hide ();
});
// $ (this) .blur (function () {
//jq_checks_select.css("vissibility","hidden ");
//Alarm();
//});
}
})
}) (jQuery);
html
Die Codekopie lautet wie folgt:
<html>
<kopf>
<script type = "text/javaScript" src = "js/jquery.js">
</script>
<script type = "text/javaScript" src = "js/jquery_mutili.js">
</script>
<script Language = "JavaScript">
$ (Dokument) .Ready (function () {
var options = {
1: "Erste Auswahl",
2: "zweite Option",
3: "dritte Option",
4: "Die vierte Option",
5: "Die fünfte Option",
6: "Sechste Option"
};
$ ("#test_div"). Checks_Select (Optionen);
});
</script>
<Styles>
.checks_div_select {
Breite: 150px;
Hintergrundfarbe: #e9fbfb;
Grenze: 1PX Solid #18CBCD;
Schriftfamilie: 'Verdana', 'Song-Stil';
Schriftgröße: 12px;
Position: absolut;
links: 2px;
Top: 25px;
}
</style>
</head>
<body>
<div style = "Position: relativ;">
<Eingabe type = "text" id = "test_div" readonly = "readonly"/>
<div> </div>
</div>
</body>
</html>