AlHal2
asked on
Use dropdown box selection to add items to listbox.
I have a form with dropdown and listboxes.
I'm using these to allow the user to filter the results they will see on a grid. There are 1000s of codes and the user may want to see 1 or 2. Therefore they select what they want from the dropdown box and add to the listbox.
When the user selects an item from the drop down box it must be added to the listbox and removed from the dropdown box. When a user selects an item and presses another button underneath the listbox the selected item must be removed from the listbox and added to the dropdown box.
I've tried these 2 sites.
http://dotnetco.de/Blog/ID/26/Using-JavaScript-on-listboxes-in-ASPnet.aspx
http://www.vijaykodali.com/Blog/post/2007/12/14/Add-Delete-Items-in-DropDownList2c-ListBox-using-Javascript.aspx
The problem with the first is that the listbox is cleared after postback. Also when items are removed from the listbox they are not removed from the hidden field.
The problem with the second is that it adds information from a textbox not a dropdown box.
I'm using these to allow the user to filter the results they will see on a grid. There are 1000s of codes and the user may want to see 1 or 2. Therefore they select what they want from the dropdown box and add to the listbox.
When the user selects an item from the drop down box it must be added to the listbox and removed from the dropdown box. When a user selects an item and presses another button underneath the listbox the selected item must be removed from the listbox and added to the dropdown box.
I've tried these 2 sites.
http://dotnetco.de/Blog/ID/26/Using-JavaScript-on-listboxes-in-ASPnet.aspx
http://www.vijaykodali.com/Blog/post/2007/12/14/Add-Delete-Items-in-DropDownList2c-ListBox-using-Javascript.aspx
The problem with the first is that the listbox is cleared after postback. Also when items are removed from the listbox they are not removed from the hidden field.
The problem with the second is that it adds information from a textbox not a dropdown box.
Does your code apply the add in and the removal whenever a button or another trigger is launched after the selection of the dropdown?
ASKER
The add in is applied when the user selects an item in the dropdown or presses button2. The removal is applied if a user presses one of the clear buttons.
There are no other triggers to add or or remove items from the list boxes.
There are no other triggers to add or or remove items from the list boxes.
To solve the problem of the items removed from the listbox but not from the hidden field: crete a script that performs the following steps associated to the same origin onchange event:
1. remove all the values of the hidden field;
2. create an array and push in all the values of the listbox;
3. add to the hidden field all the values of the above array.
The same criteria should apply also to the first problem, since the idea is to have in each moment an array that is synchronised with the choice of the user.
1. remove all the values of the hidden field;
2. create an array and push in all the values of the listbox;
3. add to the hidden field all the values of the above array.
The same criteria should apply also to the first problem, since the idea is to have in each moment an array that is synchronised with the choice of the user.
ASKER
Do you have some sample code?
Please notice first that the code you have provided is quite complex and it may already foresee a criteria to populate your lists and fields with the elements selected from the drop down, so I can only give a simple example. The idea is to have in each moment 2 arrays with in overall the N elements (more simple than a bidimensional array all the options of the dropdown and a flag value that indicates if the element has been selected or not), so something like:
ON PAGE LOAD
var myArray = new Array();
var myList = new Array();
myList="";
var myCombo=document.getElemen tById("myD ropDown");
for (var j=0; j<myCombo.length; j++) {
myArray.push= myCombo.options[j].text;
}
ON DROPDOWN SELECT(BUTTON PRESS)
myList.push(myCombo.option s(myCombo. selectedIn dex).text;
myCombo.remove(myCombo.sel ectedIndex );
ON LIST REMOVE
myCombo.push(myList.option s(myList.s electedInd ex).text;
myList.remove(myList.selec tedIndex);
ON PAGE LOAD
var myArray = new Array();
var myList = new Array();
myList="";
var myCombo=document.getElemen
for (var j=0; j<myCombo.length; j++) {
myArray.push= myCombo.options[j].text;
}
ON DROPDOWN SELECT(BUTTON PRESS)
myList.push(myCombo.option
myCombo.remove(myCombo.sel
ON LIST REMOVE
myCombo.push(myList.option
myList.remove(myList.selec
ASKER
I tried to use your code for one of the fields -filteypecode. Results are below.
When I get onto the page I get this message.
'Javascript' is not a member of 'ASP.displaydata_suppliedf ile_aspx'.
I used the selectedindexchange to remove items from the list box. Is that the best event?
function InitialiseOnFormLoad(DropD ownBoxName )
{
var myArray = new Array();
var myList = new Array();
myList="";
var myCombo=document.getElemen tById(Drop DownBoxNam e);
for (var j=0; j<myCombo.length; j++)
{
myArray.push= myCombo.options[j].text;
}
document .open=InitialiseOnFormLoad ('cmbFileT ypeCode');
function OnDropDownSelect(ListBoxNa me,DropDow nBoxName)
{
ListBoxName.push(DropDownB oxName.opt ions(DropD ownBoxName .selectedI ndex).text );
DropDownBoxName.remove(Dro pDownBoxNa me.selecte dIndex);
}
function OnListRemove(ListBoxName,D ropDownBox Name)
{
DropDownBoxName.push(ListB oxName.opt ions(ListB oxName.sel ectedIndex ).text);
ListBoxName.remove(ListBox Name.selec tedIndex);
}
<asp:ListBox ID="lstFileTypeCode" runat="server" OnSelectedIndexChanged="Ja vascript:O nListRemov e('ctl00_C ontentPlac eHolder1_l stFileType Code','ctl 00_Content PlaceHolde r1_cmbFile TypeCode') ;" > </asp:ListBox>
<asp:DropDownList ID="cmbFileTypeCode" runat="server"
OnSelectedIndexChanged ="Javascript:OnDropDownSel ect('ctl00 _ContentPl aceHolder1 _lstFileTy peCode','c tl00_Conte ntPlaceHol der1_cmbFi leTypeCode ');"
AppendDataBoundItems="True " AutoPostBack="True"></asp: DropDownLi st>
When I get onto the page I get this message.
'Javascript' is not a member of 'ASP.displaydata_suppliedf
I used the selectedindexchange to remove items from the list box. Is that the best event?
function InitialiseOnFormLoad(DropD
{
var myArray = new Array();
var myList = new Array();
myList="";
var myCombo=document.getElemen
for (var j=0; j<myCombo.length; j++)
{
myArray.push= myCombo.options[j].text;
}
document .open=InitialiseOnFormLoad
function OnDropDownSelect(ListBoxNa
{
ListBoxName.push(DropDownB
DropDownBoxName.remove(Dro
}
function OnListRemove(ListBoxName,D
{
DropDownBoxName.push(ListB
ListBoxName.remove(ListBox
}
<asp:ListBox ID="lstFileTypeCode" runat="server" OnSelectedIndexChanged="Ja
<asp:DropDownList ID="cmbFileTypeCode" runat="server"
OnSelectedIndexChanged ="Javascript:OnDropDownSel
AppendDataBoundItems="True
As I said before, the code you are already using is very complex and I could not find an optimanl way to integrate my example code in it.
ASKER
Please see http://forums.asp.net/p/983898/1264650.aspx#1264650
There is a solution posted at Apr 21, 2006 07:15 PM
I'd like to use this code except that listbox1 needs to be a dropdown box. How do I adapt the code?
Rasing to 500 points.
To get the code working change
var optionsList = ';
to
var optionsList = '';
There is a solution posted at Apr 21, 2006 07:15 PM
I'd like to use this code except that listbox1 needs to be a dropdown box. How do I adapt the code?
Rasing to 500 points.
To get the code working change
var optionsList = ';
to
var optionsList = '';
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
As I said above, the original code in SourceCode.txt is much too coplex for me to be revied without getting a mistake; I'm sorry, I cannot provide further solutions.
ASKER
I've reposted the question, hopefully phrasing it more succinctly.
ASKER
SourceCode.txt