High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

[Javascript]Basculer un ou plusieurs éléments

Dernière réponse le 9 mar 2009 à 15:18:02 hilfe, le 10 jui 2006 à 13:31:08 
 Signaler ce message aux modérateurs

Bonjour,

je suis nouvelle en javascript.

J’ai trouvé ce code sur le net et je voulais le changer, pour pouvoir: Basculer un ou plusieurs éléments d'une liste à l'autre et savoir la valeur de/des element(s) basculé dans la 2 liste pour mon select. Mais je n’y parvient pas depuis une semaine.

J’ai 2 questions :

1. S'il vous plait quelqu’un peut-il m’aider à changer ce code de maniere qu’un utilisateur puisse basculer un ou plusieurs elements à la fois ?

2. Comment avoir la valeur (value) des elements qui ont éte basculé dans la deuxieme liste ? Pardon j’ai besoin de savoir quels sont les Elements que l’utilisateur à choisi pour pouvoir faire un select dans ma base de donné.



Merci d’avance pour votre aide

hl 

<HTML>
<HEAD>
<TITLE>Tout JavaScript.com - Info Bulle DHTML</TITLE>
<SCRIPT LANGUAGE="JavaScript">

	function Deplacer(l1,l2) {
		if (l1.options.selectedIndex>=0) {
			o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);
			l2.options[l2.options.length]=o;
			l1.options[l1.options.selectedIndex]=null;
		}else{
			alert("Aucune activité sélectionnée");
		}
	}
</SCRIPT>
</HEAD>

<BODY bgcolor="#FFFFFF">
<FONT FACE="Arial" SIZE='-1' COLOR="#000099">

<CENTER><BIG><B>Basculer des éléments d'une liste à l'autre</B></BIG></CENTER>


<FORM name="formulaire">

	<TABLE><TR>
	<TD align="center"><B><FONT size="2">Activités proposées</FONT></B><BR>
	<SELECT align=top name="liste1" size=6  style="width:120px">
		<OPTION value="100">Allemagne</OPTION>
		<OPTION value="101">Autriche</OPTION>
		<OPTION value="102">Espagne</OPTION>
		<OPTION value="103">France</OPTION>
		<OPTION value="104">Italie</OPTION>
		<OPTION value="105">Le reste du monde</OPTION>
	</SELECT>
	</TD>
	<TD align="center">
	<INPUT type="button" value="Ajouter >>>" onClick="Deplacer(this.form.liste1,this.form.liste2)">
	<BR><BR>
	<INPUT type="button" value="&lt;&lt;&lt; Enlever" onClick="Deplacer(this.form.liste2,this.form.liste1)">
	</TD>
	<TD align="center"><FONT size="2"><B>Pays retenus</B></FONT><BR>
	<SELECT align=top name="liste2" size=6 style="width:120px">
		<OPTION value="10">----------------------</OPTION>
	</SELECT>
	</TD>
	</TR></TABLE>
	<SCRIPT language="javascript">
		// Astuce pour Netscape qui ne supporte pas style="width:100"
		// Donc : création d'une ligne pour initialiser la largeur puis suppression par ce javascript
		document.formulaire.liste2.options.length=0;
	</SCRIPT>
</FORM>




<BR>
</FONT></BODY></HTML>

Meilleures réponses pour « [Javascript]Basculer un ou plusieurs éléments » dans :
Javascript - Modifier la hauteur (height) d'un élément HTML VoirPour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height". Pour cela vous pouvez y faire référence de la manière suivante : Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il...
Javascript - Connaître la hauteur d'un élément HTML VoirSi vous souhaitez connaître la hauteur (height) d'un bloc HTML en javascript, il existe deux façons selon les navigateurs : element.offsetHeight element.style.pixelHeight Ainsi, le code suivant permet d'obtenir la hauteur d'un bloc HTML...
[Windows] Basculer QWERTY / AZERTY VoirVos touches de clavier sont inversées ? Il s'agit probablement d'une inversion liée au basculement du clavier de AZERTY (clavier français) à QWERTY (clavier américain). S'il s'agit d'un ordinateur portable, le problème peut également être lié à la...
Javascript - l'objet Array VoirLes particularités de l'objet Array L'objet Array est un objet du noyau Javascript permettant de créer et de manipuler des tableaux. Voici la syntaxe à utiliser pour créer une variable tableau : var x = new Array(element1[, element2, ...]); Si...
Javascript - Les tableaux VoirIntroduction à la notion de tableau Les variables de Javascript ne permettent de stocker qu'une seule donnée à la fois. Or, étant donné qu'il est souvent utile de manipuler de nombreuses données, le concept de variable se révéle parfois...
Javascript - La notion d'objet VoirNotion d'objet Le but de cette section n'a pas pour ambition de traîter de la programmation orientée objet mais de donner une idée de ce qu'est un objet, concept nécessaire à la création de scripts Javascript. Le Javascript traite les éléments qui...
Posez votre question Répondre

1

HackTrack, le 18 jui 2006 à 10:17:45
  • +1

Salut!

Une solution possible: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
	<!--
		Author: HackTrack
	-->
<head>
	<title></title>
	<style>
		body{
			padding: 0 0 0 0;
			margin: 0 0 0 0;
			font-family: Verdana, Arial, Times;
		}
		table,tr{
			background-color: #8888ff;
		}
		th{
			background-color: #9999ff;		
			color: #eeeeee;
			padding: 6 8 6 8;
		}
		td{
			background-color: #aaaaff;
			padding: 4 8 4 8;
		}
	</style>
	<script language="javascript" type="text/javascript">	
		function moveSelectedOptions(from, to){
			fromSelect = document.getElementsByName(from)[0];		
			selOpt = getSelectedOptions(fromSelect);			
			var selValues = new Array();
			if(selOpt.length>0){				
				selValues = getSelectedValues(fromSelect);
				toSelect=document.getElementsByName(to)[0];
				for(i=0;i<selOpt.length;i++){
					option = selOpt[i];
					fromSelect.removeChild(option);						
					toSelect.appendChild(option);
				}
			}	
			return selValues;
		}
		
		function getSelectedValues (select) {
			var selValues = new Array();
			for (j = 0; j < select.options.length; j++){
				selValues[selValues.length] = select.options[j].value;					
			}
			return selValues;
		}
		
		function getSelectedOptions (select) {
			var selOptions  = new Array();
			for (m = 0; m < select.options.length; m++){
				if (select.options[m].selected) {
					selOptions[selOptions.length] = select.options[m];
				}
			}
			return selOptions;
		}

		//Affichage des valeurs sélectionnées		
		function displayOptionsList(list){			
			//Enlever les commentaires ci-dessous pour afficher la valeur des options sélectionnées
			/*var msg="";
			for(n=0;n<list.length;n++){
			option = list[n];
			 msg+="["+option.value+"]";
			}
			alert(msg);*/
		}
	</script>
</head>

<body>

<table>
<tr>
<td>
<select id="list1" multiple>
	<option value="1">Alain
	<option value="2">José
	<option value="3">Philippe
</select>
</td>
<td>
	<table>
		<tr>
			<td><span onclick="list = moveSelectedOptions('list1','list2'); displayOptionsList(list);">&gt;</span></td>
		</tr>
		<tr>
			<td><span onclick="list = moveSelectedOptions('list2','list1'); displayOptionsList(list);">&lt;</span></td>
		</tr>		
	</table>
</td>
<td>
<select id="list2" multiple>
	<option value="4">Jacques
	<option value="5">Paul
	<option value="6">Pierre
</select>
</td>

</body>
</html>


;-)
HackTrack

   
Répondre à HackTrack

2

 Schaolan, le 9 mar 2009 à 15:18:02
  • +1

HackTrack ton script est correct a par une erreur.
Je post donc a nouveau ton code modifié qui fonctionne.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<!--
Author: HackTrack
-->
<head>
<title></title>
<style>
body{
padding: 0 0 0 0;
margin: 0 0 0 0;
font-family: Verdana, Arial, Times;
}
table,tr{
background-color: #8888ff;
}
th{
background-color: #9999ff;
color: #eeeeee;
padding: 6 8 6 8;
}
td{
background-color: #aaaaff;
padding: 4 8 4 8;
}
</style>
<script language="javascript" type="text/javascript">
function moveSelectedOptions(from, to)
{
fromSelect = document.getElementsByName(from)[0];
selOpt = getSelectedOptions(fromSelect);
var selValues = new Array();
if(selOpt.length>0)
{
selValues = getSelectedValues(fromSelect);
toSelect=document.getElementsByName(to)[0];
for(i=0;i<selOpt.length;i++)
{
option = selOpt[i];
fromSelect.removeChild(option);
toSelect.appendChild(option);
}
}
return selValues;
}

function getSelectedValues (select) {
var selValues = new Array();
for (j = 0; j < select.options.length; j++){
selValues[selValues.length] = select.options[j].value;
}
return selValues;
}

function getSelectedOptions (select) {
var selOptions = new Array();
for (m = 0; m < select.options.length; m++){
if (select.options[m].selected) {
selOptions[selOptions.length] = select.options[m];
}
}
return selOptions;
}

//Affichage des valeurs sélectionnées
function displayOptionsList(list){
//Enlever les commentaires ci-dessous pour afficher la valeur des options sélectionnées
/*var msg="";
for(n=0;n<list.length;n++){
option = list[n];
msg+="["+option.value+"]";
}
alert(msg);*/
}
</script>
</head>

<body>

<table>
<form>
<tr>
<td>
<select name="list1" multiple>
<option value="1">Alain
<option value="2">José
<option value="3">Philippe
</select>
</td>
<td>
<table>
<tr>
<td><span onclick="list = moveSelectedOptions('list1','list2'); displayOptionsList(list);">></span></td>
</tr>
<tr>
<td><span onclick="list = moveSelectedOptions('list2','list1'); displayOptionsList(list);"><</span></td>
</tr>
</table>
</td>
<td>
<select name="list2" multiple>
<option value="4">Jacques
<option value="5">Paul
<option value="6">Pierre
</select>
</td>
</tr>
</form>
</table>
</body>
</html>

   
Répondre à Schaolan
Posez votre question Répondre
Ils ont besoin de votre aide