Quando usei a caixa suspensa multi-primeira que escrevi da última vez, encontrei muitos problemas. Após modificação e melhoria, agora ele pode ser bem usado e tem boa portabilidade. A seguir, o código -fonte.
JS
A cópia do código é a seguinte:
(função(){
$ .fn.extend ({
checks_select: function (opções) {
jq_checks_select = null;
$ (this) .val ("--- Selecione ---");
$ (this) .Next (). Empty (); // Limpe primeiro
$ (this) .unbind ("clique");
$ (this) .Click (função (e) {
jq_check = $ (this);
//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);
$ .ECH (opções, função (i, n) {
check_div = $ ("<div> <Tipo de entrada = 'Caixa de seleção' value = '" + n + "'>" + n + "</div>"). Appendto (jq_checks_select);
check_box = check_div.children ();
check_box.Click (function (e) {
//jq_check.attr("Value"quires(this).attr("value ");
temp = "";
$ (this) .parents (). encontre ("entrada: verificado"). cada (função (i) {
if (i == 0) {
temp = $ (this) .val ();
}outro{
temp+= ","+$ (this) .val ();
}
});
// alerta (temp);
jq_check.val (temp);
E.StopPropagation ();
});
});
jq_checks_select.show ();
}outro{
jq_checks_select.toggle ();
}
E.StopPropagation ();
});
$ (documento) .Click (function () {
flag = $ ("#test_div");
if (flag.val () == "") {
flag.val ("--- Selecione ---");
}
jq_checks_select.hide ();
});
// $ (this) .blur (function () {
//jq_checks_select.css("Visibility","hidden ");
//alerta();
//});
}
})
}) (jQuery);
html
A cópia do código é a seguinte:
<html>
<head>
<script type = "text/javascript" src = "js/jquery.js">
</script>
<script type = "text/javascript" src = "js/jquery_mutili.js">
</script>
<Script Language = "JavaScript">
$ (document) .ready (function () {
var options = {
1: "Primeira seleção",
2: "Segunda opção",
3: "Terceira opção",
4: "A quarta opção",
5: "A Quinta Opção",
6: "Sexta opção"
};
$ ("#test_div"). checks_select (opções);
});
</script>
<estilo>
.checks_div_select {
Largura: 150px;
Background-Color: #e9fbfb;
Border: 1px Solid #18CBCD;
Fonte-família: 'Verdana', 'estilo de música';
tamanho de fonte: 12px;
Posição: Absoluto;
Esquerda: 2px;
TOP: 25px;
}
</style>
</head>
<Body>
<div style = "Posição: relativa;">
<input type = "text" id = "test_div" readonly = "readonly"/>
<div> </div>
</div>
</body>
</html>