Cuando usé el primer cuadro desplegable que escribí la última vez, encontré muchos problemas. Después de la modificación y la mejora, ahora se puede usar bien y tiene una buena portabilidad. El siguiente es el código fuente.
js
La copia del código es la siguiente:
(función(){
$ .fn.extend ({
checks_select: function (options) {
jq_checks_select = null;
$ (esto) .val ("--- por favor seleccione ---");
$ (this) .next (). vacía (); // claro primero
$ (esto) .unbind ("hacer clic");
$ (this) .click (función (e) {
jq_check = $ (esto);
//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 (opciones, función (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 = "";
$ (this) .Parents (). Find ("Entrada: Checked"). Cada (función (i) {
if (i == 0) {
temp = $ (this) .val ();
}demás{
temp+= ","+$ (this) .val ();
}
});
// alerta (temp);
jq_check.val (temp);
E.stoppropagation ();
});
});
jq_checks_select.show ();
}demás{
jq_checks_select.toggle ();
}
E.stoppropagation ();
});
$ (documento) .Click (function () {
flag = $ ("#test_div");
if (flag.val () == "") {
flag.val ("--- por favor seleccione ---");
}
jq_checks_select.hide ();
});
// $ (this) .blur (function () {
//jq_checks_select.css("visibility","hidden ");
//alerta();
//});
}
})
}) (jQuery);
html
La copia del código es la siguiente:
<html>
<Evista>
<script type = "text/javaScript" src = "js/jQuery.js">
</script>
<script type = "text/javaScript" src = "js/jquery_mutili.js">
</script>
<script language = "javaScript">
$ (documento) .Ready (function () {
opciones var = {
1: "Primera selección",
2: "Segunda opción",
3: "tercera opción",
4: "La cuarta opción",
5: "La quinta opción",
6: "Sexta opción"
};
$ ("#test_div"). checks_select (opciones);
});
</script>
<estilo>
.CHECKS_DIV_SELECT {
Ancho: 150px;
Color de fondo: #E9FBFB;
borde: 1px Solid #18CBCD;
Font-Family: 'Verdana', 'Song-Style';
tamaño de fuente: 12px;
Posición: Absoluto;
Izquierda: 2px;
arriba: 25px;
}
</style>
</ablo>
<Body>
<div style = "Posición: relativo;">
<input type = "text" id = "test_div" readonly = "readonly"/>
<div> </div>
</div>
</body>
</html>