[Javascript]Basculer un ou plusieurs éléments

hilfe Messages postés 1 Statut Membre -
JD - 26 août 2014 à 19:31

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>

Afficher la suite

A voir également:

[Javascript]Basculer un ou plusieurs éléments
Photoshop elements gratuit - Télécharger - Retouche d'image
Basculer clavier en azerty - Guide
Basculer ecran pc - Guide
Copier plusieurs éléments - Guide
Telecharger javascript - Télécharger - Langages

2 réponses

Réponse 1 / 2

Utilisateur anonyme

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éponse 2 / 2

Schaolan

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>

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

Bon ce post est genre hyper vieux mais tant pis je tente ma chance. J'ai testé ton code et dans l'alerte il me dit "[undefined][undefined][undefined]"... Autant dire qu'il récupère pas les infos...

Une solution ? Sachant que j'ai deux sites qui auraient besoin de ton aide ! :p

Discussions similaires

java script error in the main process

Javascript Arrondi à 2 chiffres après la virgule

javascript:void(0);

Votre réponse

Discussions similaires