|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 ENFIN UNE LISTE DEROULANTE (COMBOBOX) MODIFIABLE
 Information sur la source
 Description
J'ai longtemps cherché, et finalement j'ai fait mon propre truc, en reprenant qq sources de ce site. Je suis débutant, donc y'a peut-être des bugs... Mots clés : liste déroulante deroulante modifiable combo box combobox calque Fonctionne sur IE5+
 Source
- <html>
- <script>
- function display_liste(calqt, calql) { // Affiche le calque de la liste
- calql.style.visibility = 'visible';
- calql.style.top = calqt.style.top;
- //calql.style.top = calqt.style.top + 40;
- calql.style.left = calqt.style.left;
- }
- function hide_liste(calqt, calql) { // Affiche ou masque le calque de la liste suivant son dernier état
- if (calql.style.visibility == 'visible') {
- calql.style.visibility = 'hidden';
- }
- else {
- display_liste(calqt, calql);
- }
- }
- function display_down(keyc, listd, calqt, calql) { // Affiche la liste si la touche "keyc" est pressée
- if (event.keyCode==keyc) {
- display_liste(calqt, calql);
- }
- if ((event.keyCode==40) && (event.keyCode==keyc)) {
- listd.focus();
- }
- }
- function enter_list(textb, listd, calql) { // appelle getValue si la touche "Enter" est pressée dans la liste
- if (event.keyCode==13) {
- getValue(textb, listd, calql);
- }
- }
- function liste_lostfocus(textb, listd, calql) { // Masque le calque si le texte et la liste n'ont pas le focus
- if ( (self.document.activeElement.name != textb) && (self.document.activeElement.name != listd) ) {
- calql.style.visibility = 'hidden';
- }
- }
- function getValue(textb,listd, calql) { // Affecte la valeur de la liste choisie dans la zone de texte
- textb.value=listd.item(listd.selectedIndex).text;
- // textb.value=listd.item(listd.selectedIndex).value; si on veut la valeur dans le code et pas dans la liste
- calql.style.visibility = 'hidden';
- textb.focus();
- textb.select();
- }
- function list_size(liste) {
- t=0;
- for(i=0; i<liste.length; i++) {
- if(liste.options[i].value.length > t) {
- t=liste.options[i].value.length;
- }
- }
- list_size=t;
- }
- function text_exist(textb, listd) { // regarde si le début existe
- if (textb.value != "") {
- for (i=0; i<listd.length; i++) {
- if (textb.value.toLowerCase() == listd[i].text.substring(0, textb.value.length).toLowerCase()) {
- return i;
- }
- else {
- if (listd[i].text > textb.value.substring(0, listd[i].text.length)) {
- return -2;
- }
- }
- }
- }
- return -1;
- }
- function disp_exist(textb, listd, calqt, calql) { // regarde si existe et affiche le calque de la liste
- temp=text_exist(textb, listd);
- if (temp != -1) {
- display_liste(calqt, calql);
- }
- else {
- calql.style.visibility = 'hidden';
- }
- return temp;
- }
- function text_match(textb, listd) { // regarde si le texte existe en entier
- if (textb.value != "") {
- for (i=0; i<listd.length; i++) {
- if (textb.value.toLowerCase() == listd[i].text.toLowerCase()) {
- return i;
- }
- }
- }
- return -1;
- }
- function insert_new(textb, listd) { // insére avant ou en fin
- if (textb.value != "") {
- if (text_match(textb, listd) == -1) {
- pos=listd.length;
- for (i=0; i<listd.length; i++) {
- if (listd[i].text>textb.value) {
- pos=i;
- i=listd.length;
- }
- }
- listd.length++;
- for (i=listd.length-1; i>pos; i--) {
- listd[i].text=listd[i-1].text;
- }
- listd[pos].text=textb.value;
- alert("new entry added !");
- }
- else {
- alert("Entry already exists !");
- }
- }
- }
- </script>
-
- <body>
-
- <div id="texte1" nowrap STYLE="border-width:2;border-style:inset;border-color:white;width:0;display:inline;visibility:visible;">
- <input type="text" name="texteb" value='' style="border-width:0;font-size:14;" size="25"
- onDblClick="hide_liste(document.getElementById('texte1'), document.getElementById('liste1')); document.getElementById('texteb').select();"
- onblur="liste_lostfocus('texteb', 'listed', document.getElementById('liste1'));"
- onkeyup="document.getElementById('listed').selectedIndex=disp_exist(document.getElementById('texteb'), document.getElementById('listed'), document.getElementById('texte1'), document.getElementById('liste1'));
- display_down(40, document.getElementById('listed'), document.getElementById('texte1'), document.getElementById('liste1'));"
- onkeydown="display_down(34, document.getElementById('listed'), document.getElementById('texte1'), document.getElementById('liste1'));">
- <input type="button" name="bouton" value="6" style="line-height:0;height:18;font-family:webdings;font-size:10;" onClick="hide_liste(document.getElementById('texte1'), document.getElementById('liste1'));" onblur="liste_lostfocus('texteb', 'listed', document.getElementById('liste1'));">
- </div>
-   <input type=button style="font-family:arial;" value="Add to list" onclick="insert_new(document.getElementById('texteb'), document.getElementById('listed'));">
-
- <div id="liste1" STYLE="postion:absolute;visibility:hidden;">
- <select name="listed" size="10" onClick="getValue(document.getElementById('texteb'), document.getElementById('listed'), document.getElementById('liste1'));" onkeydown="enter_list(document.getElementById('texteb'), document.getElementById('listed'), document.getElementById('liste1'));">
- <option VALUE="Item1">Item1-2</option >
- <option VALUE="Item2">Item2</option>
- <option VALUE="Item3">Item3</option>
- </select>
- </div>
-
- <br><br><br>
- </body>
- <html>
<html>
<script>
function display_liste(calqt, calql) { // Affiche le calque de la liste
calql.style.visibility = 'visible';
calql.style.top = calqt.style.top;
//calql.style.top = calqt.style.top + 40;
calql.style.left = calqt.style.left;
}
function hide_liste(calqt, calql) { // Affiche ou masque le calque de la liste suivant son dernier état
if (calql.style.visibility == 'visible') {
calql.style.visibility = 'hidden';
}
else {
display_liste(calqt, calql);
}
}
function display_down(keyc, listd, calqt, calql) { // Affiche la liste si la touche "keyc" est pressée
if (event.keyCode==keyc) {
display_liste(calqt, calql);
}
if ((event.keyCode==40) && (event.keyCode==keyc)) {
listd.focus();
}
}
function enter_list(textb, listd, calql) { // appelle getValue si la touche "Enter" est pressée dans la liste
if (event.keyCode==13) {
getValue(textb, listd, calql);
}
}
function liste_lostfocus(textb, listd, calql) { // Masque le calque si le texte et la liste n'ont pas le focus
if ( (self.document.activeElement.name != textb) && (self.document.activeElement.name != listd) ) {
calql.style.visibility = 'hidden';
}
}
function getValue(textb,listd, calql) { // Affecte la valeur de la liste choisie dans la zone de texte
textb.value=listd.item(listd.selectedIndex).text;
// textb.value=listd.item(listd.selectedIndex).value; si on veut la valeur dans le code et pas dans la liste
calql.style.visibility = 'hidden';
textb.focus();
textb.select();
}
function list_size(liste) {
t=0;
for(i=0; i<liste.length; i++) {
if(liste.options[i].value.length > t) {
t=liste.options[i].value.length;
}
}
list_size=t;
}
function text_exist(textb, listd) { // regarde si le début existe
if (textb.value != "") {
for (i=0; i<listd.length; i++) {
if (textb.value.toLowerCase() == listd[i].text.substring(0, textb.value.length).toLowerCase()) {
return i;
}
else {
if (listd[i].text > textb.value.substring(0, listd[i].text.length)) {
return -2;
}
}
}
}
return -1;
}
function disp_exist(textb, listd, calqt, calql) { // regarde si existe et affiche le calque de la liste
temp=text_exist(textb, listd);
if (temp != -1) {
display_liste(calqt, calql);
}
else {
calql.style.visibility = 'hidden';
}
return temp;
}
function text_match(textb, listd) { // regarde si le texte existe en entier
if (textb.value != "") {
for (i=0; i<listd.length; i++) {
if (textb.value.toLowerCase() == listd[i].text.toLowerCase()) {
return i;
}
}
}
return -1;
}
function insert_new(textb, listd) { // insére avant ou en fin
if (textb.value != "") {
if (text_match(textb, listd) == -1) {
pos=listd.length;
for (i=0; i<listd.length; i++) {
if (listd[i].text>textb.value) {
pos=i;
i=listd.length;
}
}
listd.length++;
for (i=listd.length-1; i>pos; i--) {
listd[i].text=listd[i-1].text;
}
listd[pos].text=textb.value;
alert("new entry added !");
}
else {
alert("Entry already exists !");
}
}
}
</script>
<body>
<div id="texte1" nowrap STYLE="border-width:2;border-style:inset;border-color:white;width:0;display:inline;visibility:visible;">
<input type="text" name="texteb" value='' style="border-width:0;font-size:14;" size="25"
onDblClick="hide_liste(document.getElementById('texte1'), document.getElementById('liste1')); document.getElementById('texteb').select();"
onblur="liste_lostfocus('texteb', 'listed', document.getElementById('liste1'));"
onkeyup="document.getElementById('listed').selectedIndex=disp_exist(document.getElementById('texteb'), document.getElementById('listed'), document.getElementById('texte1'), document.getElementById('liste1'));
display_down(40, document.getElementById('listed'), document.getElementById('texte1'), document.getElementById('liste1'));"
onkeydown="display_down(34, document.getElementById('listed'), document.getElementById('texte1'), document.getElementById('liste1'));">
<input type="button" name="bouton" value="6" style="line-height:0;height:18;font-family:webdings;font-size:10;" onClick="hide_liste(document.getElementById('texte1'), document.getElementById('liste1'));" onblur="liste_lostfocus('texteb', 'listed', document.getElementById('liste1'));">
</div>
  <input type=button style="font-family:arial;" value="Add to list" onclick="insert_new(document.getElementById('texteb'), document.getElementById('listed'));">
<div id="liste1" STYLE="postion:absolute;visibility:hidden;">
<select name="listed" size="10" onClick="getValue(document.getElementById('texteb'), document.getElementById('listed'), document.getElementById('liste1'));" onkeydown="enter_list(document.getElementById('texteb'), document.getElementById('listed'), document.getElementById('liste1'));">
<option VALUE="Item1">Item1-2</option >
<option VALUE="Item2">Item2</option>
<option VALUE="Item3">Item3</option>
</select>
</div>
<br><br><br>
</body>
<html>
 Conclusion
J'aime bien le code mis en forme avec des indentations là où il faut...
 Fichier Zip
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !
 Télécharger le zip
 Sources du même auteur
 Sources de la même categorie
Sources en rapport avec celle ci
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
liste déroulante avec javascript [ par mickelo ]
alors en fait moi j'ai une liste déroulante dans laquelle l'utilisateur choisit un produit(en provenance d'une base de données SQL et piloté par ASP)
liste déroulante avec bouton de validation [ par nino ]
Bonjour je débute depuis peu ds l'HTML donc si quelqu'un pouvait m'eclaircir ca serait sympa.J'aimerais ouvrir une nouvelle fenetre a partir du moment
Liste déroulante [ par rich25200 ]
Bonjour,> > J'ai une liste déroulante que j'alimente avec une table de ma base... Or il y a des champs ou le texte est assez long et come ma lis
Liste déroulante + input [ par JMO ]
Bonjour, Je débute ce jour même sur java. Pour apprendre en douceur, j'essaie de me faire un annuaire téléphonique. Liste déroulante + avec un click,
Liste déroulante [ par JMO ]
Bonjour,Je suis tout nouveau en JavaScript.J'apprends en solo avec un tutétoriel en ligne (Matizha Sublime).Je me suis inspiré d'un code "Liste déroul
Actualiser une page ?? [ par rich25200 ]
Bonjour,J'ai une page avec une liste déroulante qui est alimenté avec une base de données.. Je programme avec php... Et j'ai aussi d'autre champ texte
PB Liste déroulante [ par iomega ]
Bonjour à tous je voudrai savoir si quelqu'un pourrait m'aider à résoudre ce problème!!j'ai une liste déroulante qui est remplie d'après une table mys
Rafraichir une liste à partir d'une autre liste [ par highlander1492 ]
Bonjour,Je cherche un moyen simple pour rafraichir le contenu d'une liste déroulante en fonction du choix fait dans une autre liste déroulante.Quelqu'
Liste déroulante et zone de texte [ par tampigns ]
Bonjour,Je souhaiterais pouvoir controler une liste déroulante par une zone de texte ou pouvoir utiliser la liste seule.J'explique :Je voudrais par ex
Style différent dans une liste déroulante [ par salley ]
Bonjour tous le monde,J'aimerais savoir comment appliquer un style different pour chaque selection de ma liste deroulante.J'ai essayer bien sur d'ajo
|
 Téléchargements
Logiciels à télécharger sur le même thème :
|