CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 09:46:14

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Formulaire

> ENFIN UNE LISTE DEROULANTE (COMBOBOX) MODIFIABLE

ENFIN UNE LISTE DEROULANTE (COMBOBOX) MODIFIABLE

Information sur la source

Note :

7,00 / 10

Catégorie :Formulaire Classé sous :combobox, liste, déroulante, modifiable Niveau :Initié Date de création :03/02/2004 Vu / téléchargé :45 826 / 2 359

Auteur : dadavyvy

Ecrire un message privé

Commentaire sur cette source (10)

Ajouter un commentaire et/ou une note

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>
&nbsp&nbsp<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>
&nbsp&nbsp<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

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

ComboModif.htm 5 063 octets

Télécharger le zip

Sources du même auteur

MENU VERTICAL DÉROULANT PLUS MOINS

Toutes les sources de dadavyvy

Sources de la même categorie

FORMULAIRE TABLEAU par vic511

FORMULAIRE DYNAMIQUE par Niidhogg

CONTRAINTE DE SAISIE SUR CHAMPS INPUT par ryosama

SELECTS DÉPENDANTS PRÉ-CHARGÉS D'UNE SEULE OPTION par phm

BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

Toutes les sources de la catégorie Formulaire

Sources en rapport avec celle ci

BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

RETROUVER LE NUMÉROS DE TELEPHONE DE VOTRE EMPLOYER RAPIDEME... par rappise

TABLEAU GÉNÉRÉ ET TRIÉ PAR LE CLIENT par Klephte

LISTE À CHOIX MULTIPLES par Klephte

TRIER UNE LISTE LIÉES PAR 2 AUTRES LISTES À CHOIX MULTIPLE par fabiano13

Commentaires et avis

Commentaire de linkinpar236737 le 04/02/2004 11:43:00

Oui, très bien cette souce, elle peut être utile. A mon avis, la source peut être allégée mais c'est déjà bien.
Bonne continuation.

Commentaire de juki_webmaster le 04/02/2004 13:45:20

Bien :)
Frachement c'est un bon moyen de decorer son site .
note : 8/10
Bonne continauation .
:)

Commentaire de nanarchiste le 05/02/2004 08:41:24

je voi pa trop a koi sa peu servir donc expliquer moi je pourrai en juger aprés

Commentaire de Jsman le 06/02/2004 22:32:54

Pouvoir virer des items et les réorganiser dans l'ordre que tu veux serait génial !

C'est très bien fait

Commentaire de sifucyr le 18/03/2004 15:29:24

Félicitations !
Le code est propre et bien identé
Ta fonction peut être très utile dans bien des cas, par exemple pour une appli en mode asp de gestion de stock...
Merci pour ta contribution

Commentaire de Vandelan le 18/05/2004 16:49:54

Super comme code
J'ai longtemps chipoté pour arriver à ce résultat et je n'y suis pas arriver. Ca donne des idées.

Merci et bonne continuation

Commentaire de harlock59 le 10/07/2006 12:51:19

ca n'a pas l'air de fonctionner avec firefox...
et avec ie, (sous xp sp2) il faut autoriser l'interactivité.
de plus, dès que l'on ferme la page, la liste s'efface...
sinon, c'est un bon debut.
il faudrait créer un fichier contenant les éléments de la liste, ou bien les stocker en mysql dans une base, mais là on depasse le javascript...
et dommage que l'on ne puisse pas débuter avec une liste vide, car on ne peut pas supprimer item 1-2, 2 et 3.

Commentaire de atschum le 05/09/2006 11:43:23

Super ça sera bien utile.

Merci

Commentaire de liubov le 01/11/2006 18:21:48

Ayant le même besoin, j'étais parti tête dans le guidon pour arriver sensiblement à la même chose. Alors merci pour ton code. Vraiment dommage que le combo box de formulaire n'aie pas été conçu pour la sélection ET l'écriture de valeur ...
marc

Commentaire de shadow52 le 05/01/2007 21:20:07

Je tiens a signaler qu'il y a des erreurs dans le code html !!!
tu declare des imput comme ça :
<input type="text" name="texteb"
et tu veux recuperer une de ses valeurs comme ça :
document.getElementById('listed').selectedIndex

cest pas trop possible il me semble

Ajouter un commentaire

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

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

RE : CODE BUG JAVASCRIPT par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP