Lorsque j'ai utilisé la boîte déroulante multi-premiers que j'ai écrite la dernière fois, j'ai trouvé beaucoup de problèmes. Après modification et amélioration, il peut maintenant être bien utilisé et a une bonne portabilité. Ce qui suit est le code source.
js
La copie de code est la suivante:
(fonction(){
$ .fn.extend ({
checks_select: fonction (options) {
jq_checks_select = null;
$ (this) .val ("--- Veuillez sélectionner ---");
$ (this) .next (). vide (); // Effacer d'abord
$ (this) .unbind ("cliquez");
$ (this) .click (fonction (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>"). insertaTater (jq_check);
$ .each (Options, fonction (i, n) {
check_div = $ ("<v> <input type = 'checkbox' value = '" + n + "' '>" + n + "</div>"). APPENDTO (jq_checks_select);
check_box = check_div.children ();
check_box.click (fonction (e) {
//jq_check.attr("value" ,$( celle-là.attr("value "));
temp = "";
$ (this) .parents (). find ("entrée: vérifié"). Chaque (fonction (i) {
if (i == 0) {
temp = $ (this) .val ();
}autre{
temp + = "," + $ (this) .val ();
}
});
// alerte (temp);
jq_check.val (temp);
e.stoppropagation ();
});
});
jq_checks_select.show ();
}autre{
jq_checks_select.toggle ();
}
e.stoppropagation ();
});
$ (document) .click (function () {
flag = $ ("# test_div");
if (flag.val () == "") {
Flag.val ("--- Veuillez sélectionner ---");
}
jq_checks_select.hide ();
});
// $ (this) .blur (function () {
//JQ_CHECKS_SELECT.css("Visibility" ,"hidden ");
//alerte();
//});
}
})
}) (jQuery);
html
La copie de code est la suivante:
<html>
<adal>
<script type = "text / javascript" src = "js / jquery.js">
</cript>
<script type = "text / javascript" src = "js / jquery_mutili.js">
</cript>
<script linguisse = "javascript">
$ (document) .ready (function () {
Var Options = {
1: "Première sélection",
2: "Deuxième option",
3: "troisième option",
4: "La quatrième option",
5: "La cinquième option",
6: "Sixième option"
};
$ ("# test_div"). checks_select (options);
});
</cript>
<style>
.checks_div_select {
Largeur: 150px;
Color d'arrière-plan: # E9FBFB;
Border: 1px solide # 18CBCD;
Font-Family: 'Verdana', 'Song-style';
taille de police: 12px;
Position: absolue;
Gauche: 2px;
en haut: 25px;
}
</ style>
</ head>
<body>
<div style = "position: relative;">
<input type = "text" id = "test_div" readonly = "readonly" />
<div> </div>
</div>
</docy>
</html>