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.
AlHal2Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
AlHal2Connect With a Mentor Author Commented:
Please forget the code I sent you.  It didn't work, so ignore it.
0
 
AlHal2Author Commented:
Attaching source code.  Hopefully it will clarify the question.  The reason for the auto extender is that the filenamecode has hundreds of items in the dropdown box.  Users may not know the exact code they want.
SourceCode.txt
0
 
Sar1973Commented:
Does your code apply the add in and the removal whenever a button or another trigger is launched after the selection of the dropdown?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
AlHal2Author Commented:
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.
0
 
Sar1973Commented:
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.
0
 
AlHal2Author Commented:
Do you have some sample code?
0
 
Sar1973Commented:
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.getElementById("myDropDown");
for (var j=0; j<myCombo.length; j++) {
myArray.push= myCombo.options[j].text;
}
ON DROPDOWN SELECT(BUTTON PRESS)
myList.push(myCombo.options(myCombo.selectedIndex).text;
myCombo.remove(myCombo.selectedIndex);
ON LIST REMOVE
myCombo.push(myList.options(myList.selectedIndex).text;
myList.remove(myList.selectedIndex);
0
 
AlHal2Author Commented:
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_suppliedfile_aspx'.

I used the selectedindexchange to remove items from the list box.  Is that the best event?

 function InitialiseOnFormLoad(DropDownBoxName)
    {
        var myArray = new Array();
        var myList = new Array();
        myList="";
        var myCombo=document.getElementById(DropDownBoxName);
        for (var j=0; j<myCombo.length; j++)
        {
        myArray.push= myCombo.options[j].text;
    }
    document .open=InitialiseOnFormLoad('cmbFileTypeCode');

    function OnDropDownSelect(ListBoxName,DropDownBoxName)
    {
        ListBoxName.push(DropDownBoxName.options(DropDownBoxName.selectedIndex).text);
        DropDownBoxName.remove(DropDownBoxName.selectedIndex);
       
    }                
    function OnListRemove(ListBoxName,DropDownBoxName)
    {
        DropDownBoxName.push(ListBoxName.options(ListBoxName.selectedIndex).text);
        ListBoxName.remove(ListBoxName.selectedIndex);
    }



<asp:ListBox ID="lstFileTypeCode" runat="server" OnSelectedIndexChanged="Javascript:OnListRemove('ctl00_ContentPlaceHolder1_lstFileTypeCode','ctl00_ContentPlaceHolder1_cmbFileTypeCode');" >  </asp:ListBox>
                   
<asp:DropDownList ID="cmbFileTypeCode" runat="server"
OnSelectedIndexChanged ="Javascript:OnDropDownSelect('ctl00_ContentPlaceHolder1_lstFileTypeCode','ctl00_ContentPlaceHolder1_cmbFileTypeCode');"
AppendDataBoundItems="True" AutoPostBack="True"></asp:DropDownList>
0
 
Sar1973Commented:
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.
0
 
AlHal2Author Commented:
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 = '';
0
 
Sar1973Commented:
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.
0
 
AlHal2Author Commented:
I've reposted the question, hopefully phrasing it more succinctly.
0
All Courses

From novice to tech pro — start learning today.