Version imprimable
salut,
j'essaye de réaliser un modéle similaire de cette page http://stat.wto.org/StatisticalProgr...spx?Language=E
Mon soucis c'est que je suis pas trop javascript, donc j'ai besoin de votre aide pour ajouter un item d'une liste dans une autre liste
des idées?
pour plus de details regarder ce lien ci-dessus
bonjour,
http://www.developpez.net/forums/sho...d.php?t=285048 :question:
Merci pour la réponse,
J'ai arrivé à réaliser la première partie mais a chaque fois je sélectionne un autre item (selectchange) le contenu de la 2éme liste est effacée.
Je trouve que c’est normal parce que il y a un load derrière
Des idées ? Pour que je puisse enregistrer le contenu passé par javascript lorsque on load une page aspx
sauvegarder les états des selects ???
Pas en javascript !
a ton avis comment je peux le faire
pour plus de details vous pouvez voir ce lien
http://stat.wto.org/StatisticalProgr...spx?Language=E
passe les arguments à asp et sauvegarde l'état coté asp et du coup sur le onload il faudra recupérer l'état ...
stp tu peux donner plus d'explications ? car je suis un débutant
voila mon code aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="pays.aspx.vb" Inherits="pays" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Page sans titre</title>
<link href="cnce.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
var values
function MoveItem(rusrSource,rusrDest,rtxtHSource,rtxtHDest)
{
var docLength;
var incrementCount =0;
docLength=rusrSource.length-1;
for(sellop=0;sellop <= docLength ;sellop++)
{
if(rusrSource.options[incrementCount].selected==true)
{
var lngCtr;
var lngLoop;
var selText=rusrSource.options[incrementCount].text;
var selValue=rusrSource.options[incrementCount].value;
var desLength=rusrDest.length;
rusrDest.options[desLength] =new Option(selText,selValue);
if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1)
{
rusrSource.options[incrementCount]=null;
}
else
{
rusrSource.remove(incrementCount);
}
}
else
{
incrementCount++;
}
}
selectedvalues(rusrSource,rusrDest,rtxtHSource,rtxtHDest);
sortSelect(rusrDest,compareValue);
}
//************************************************
function compareValue(option1, option2)
{
// if (values =="StatIND")
// {
// return option1.value < option2.value ? -1 : option1.value > option2.value ? 1 : 0;
// }
// else
// {
return option1.text < option2.text ? -1 : option1.text > option2.text ? 1 : 0;
// }
}
//************************************************
function sortSelect(select)
{
//// if (values =="StatYEAR")
//// {
// var options = new Array (select.options.length);
// for (var i = 0; i < options.length; i++)
// {
// options[i] =new Option(select.options[i].text,select.options[i].value)
// }
// options.sort(compareValue);
//
// select.options.length = 0;
// var j=0
// for (var i = options.length; i >0; i--)
// {
// select.options[j] = options[i-1];
// j=j+1
// }
// }
// else
// {
var options = new Array (select.options.length);
for (var i = 0; i < options.length; i++)
{
options[i] =new Option(select.options[i].text,select.options[i].value)
}
options.sort(compareValue);
select.options.length = 0;
for (var i = 0; i < options.length; i++)
{
select.options[i] = options[i];
}
// }
}
//************************************************
function MoveItemONE(rusrSource,rusrDest,rtxtHSource,rtxtHDest)
{
var docLength;
var incrementCount =0;
docLength=rusrSource.length-1;
for(sellop=0;sellop <= docLength ;sellop++)
{
if(rusrDest.length < 1)
{
if(rusrSource.options[incrementCount].selected==true)
{
var lngCtr;
var lngLoop;
var selText=rusrSource.options[incrementCount].text;
var selValue=rusrSource.options[incrementCount].value;
var desLength=rusrDest.length;
rusrDest.options[desLength] =new Option(selText,selValue);
if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1)
{
rusrSource.options[incrementCount]=null;
}
else
{
rusrSource.remove(incrementCount);
}
}
else
{
incrementCount++;
}
}
}
// selectedvalues(rusrSource,rusrDest,rtxtHSource,rtxtHDest);
sortSelect(rusrDest);
}
//************************************************
function MoveItemMax(rusrSource,rusrDest,rtxtHSource,rtxtHDest)
{
var docLength;
var incrementCount =0;
docLength=rusrSource.length-1;
for(sellop=0;sellop <= docLength ;sellop++)
{
if(rusrDest.length < 10)
{
if(rusrSource.options[incrementCount].selected==true)
{
var lngCtr;
var lngLoop;
var selText=rusrSource.options[incrementCount].text;
var selValue=rusrSource.options[incrementCount].value;
var desLength=rusrDest.length;
rusrDest.options[desLength] =new Option(selText,selValue);
if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1)
{
rusrSource.options[incrementCount]=null;
}
else
{
rusrSource.remove(incrementCount);
}
}
else
{
incrementCount++;
}
}
}
selectedvalues(rusrSource,rusrDest,rtxtHSource,rtxtHDest);
sortSelect(rusrDest);
}
//************************************************
function selectedvalues(src,dest,hidsrc,hiddest){
var sellop;
var selval;
var oldval="";
var destLen=dest.length;
hiddest.value="";
for(sellop=0;sellop<destLen;sellop++)
{
selval= dest.options[sellop].value;
if(oldval !="")
{
oldval=oldval+","+selval;
}
else
{
oldval=selval;
}
}
hiddest.value=oldval;
oldval="";
hidsrc.value="";
for(sellop=0;sellop<src.length;sellop++)
{
selval=src.options[sellop].value;
if(oldval !="")
{
oldval=oldval+","+selval;
}
else
{
oldval=selval;
}
}
hidsrc.value=oldval;
}
//************************************************
function AddClick(value)
{
var usrform;
var usrLeftList;
var usrRightList;
var txtHLeftList;
var txtHRightList;
if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1)
{
usrform = document.forms['Form1'];
}
else
{
usrform = document.Form1;
}
usrLeftList = document.forms['Form1']['PSIGroupListControl_LeftList'];
usrRightList = document.forms['Form1']['PSIGroupListControl_RightList'];
txtHLeftList = document.forms['Form1']['PSIGroupListControl_txtHLeftList'];
txtHRightList =document.forms['Form1']['PSIGroupListControl_txtHRightList'];
values=value
if(value=='CP')
{
MoveItemMax(usrLeftList,usrRightList,txtHLeftList,txtHRightList);
}
else if(value=='StatUNIT')
{
MoveItemONE(usrLeftList,usrRightList,txtHLeftList,txtHRightList);
}
else
{
MoveItem(usrLeftList,usrRightList,txtHLeftList,txtHRightList);
}
}
//************************************************
function RemClick(value)
{
var usrform;
var usrLeftList;
var usrRightList;
var txtHLeftList;
var txtHRightList;
if (window.navigator.appName.toLowerCase().indexOf("netscape") > -1)
{
usrform = document.forms["Form1"];
}
else
{
usrform = document.Form1;
}
usrLeftList = document.forms['Form1']['PSIGroupListControl_LeftList'];
usrRightList = document.forms['Form1']['PSIGroupListControl_RightList'];
txtHLeftList = document.forms['Form1']['PSIGroupListControl_txtHLeftList'];
txtHRightList =document.forms['Form1']['PSIGroupListControl_txtHRightList'];
values=value
MoveItem(usrRightList,usrLeftList,txtHRightList,txtHLeftList);
if(txtHRightList.value=="")
{
txtHRightList.value=0;
}
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<div>
<table border="0">
<tr class="TexteTab"><td colspan="3" style="height: 20px">
<asp:DropDownList CssClass="TexteTab" ID="list_groupe" runat="server" AutoPostBack="true" Width="373px">
<asp:ListItem Value="1">La liste des pays</asp:ListItem>
<asp:ListItem Value="2">La liste des zones économiques</asp:ListItem>
<asp:ListItem Value="3">La liste des zones géographiques</asp:ListItem>
<asp:ListItem Value="4">La liste des zones de libre échange</asp:ListItem>
</asp:DropDownList>
</td></tr>
<tr class="TexteTab" runat="server" id="tr_zones"><td colspan="3" style="height: 20px">
<asp:DropDownList CssClass="TexteTab" ID="Zones" runat="server" AutoPostBack="true" Width="373px"></asp:DropDownList>
</td></tr>
<tr class="TexteTab" runat="server" id="test" visible="false">
<td valign="top" style="height: 211px"> <asp:ListBox Width="118px" CssClass="TexteTab" ID="ListBox1" runat="server" Height="220px"></asp:ListBox></td>
<td style="height: 211px; Width:120px">
<asp:Button ID="add" CssClass="TexteTab" Width="120" runat="server" Text="ADD" /><br />
<asp:Button ID="Remove" CssClass="TexteTab" Width="120" runat="server" Text="REMOVE" /><br /><br />
<asp:Button ID="add_all" CssClass="TexteTab" Width="120" runat="server" Text="ADD ALL" /><br />
<asp:Button ID="remove_all" CssClass="TexteTab" Width="120" runat="server" Text="REMOVE ALL" /></td>
<td valign="top" style="width: 122px; height: 211px"> <asp:ListBox Width="120" CssClass="TexteTab" ID="ListBox2" runat="server" Height="221px"></asp:ListBox></td>
</tr>
<tr class="TexteTab" >
<td valign="top" style="height: 211px"> <select runat="server" name="PSIGroupListControl_LeftList" multiple="true" id="PSIGroupListControl_LeftList" class="TexteTab" OnDblClick="AddClick('StatIND')" style="background-color:MintCream;height:210px; width: 116px;"></select></td>
<td style="height: 211px; Width:120px"> <TABLE id="Table1" borderColor="#ffffff" cellSpacing="3" borderColorDark="#ffffff" cellPadding="0"
width="100%" borderColorLight="#ffffff" border="0">
<TR>
<TD align="center">
<FONT color="#ffffff"><a id="PSIGroupListControl_GeneralADD" href="javascript:AddClick('StatIND');"><img src="Images/Btn_Curved_Add_E.gif" alt="add" border="0" /></a></FONT>
</td></TR>
<TR>
<TD align="center">
<FONT color="#ffffff"><a id="PSIGroupListControl_GeneralREM" href="javascript:RemClick('StatIND');"><img src="Images/Btn_Curved_Remove_E.gif" alt="Rem" border="0" /></a></FONT>
<br /><br /></td></TR>
<TR>
<TD align="center">
<FONT color="#ffffff"><input runat =server type="image" name="PSIGroupListControl:GeneralADDALL" id="PSIGroupListControl_GeneralADDALL" src="Images/Btn_Curved_AddAll_E.gif" alt="" border="0" /></FONT>
</td></TR>
<TR>
<TD align="center">
<FONT color="#ffffff"><input runat =server type="image" name="PSIGroupListControl:GeneralClear" id="PSIGroupListControl_GeneralClear" src="Images/Btn_Curved_RemoveAll_E.gif" alt="" border="0" /></FONT>
</td></TR></TABLE></td>
<td valign="top" align="right" style="width: 122px; height: 211px"><select runat="server" name="PSIGroupListControl_RightList" class="TexteTab" multiple="true" id="PSIGroupListControl_RightList" OnDblClick="RemClick('StatIND')" style="background-color:MintCream;height:210px; width: 116px;"></select></td>
</tr>
<tr><td><input name="PSIGroupListControl_txtHRightList" id="PSIGroupListControl_txtHRightList" type="hidden" style="WIDTH: 16px; HEIGHT: 22px" size="1" /></td><td> </td><td><input name="PSIGroupListControl_txtHLeftList" id="PSIGroupListControl_txtHLeftList" type="hidden" style="WIDTH: 16px; HEIGHT: 22px" size="1" /></td></tr>
</table>
</div>
</form>
</body>
</html>