Link to home
Start Free TrialLog in
Avatar of AlHal2
AlHal2Flag for United Kingdom of Great Britain and Northern Ireland

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.
Avatar of AlHal2
AlHal2
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

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
Does your code apply the add in and the removal whenever a button or another trigger is launched after the selection of the dropdown?
Avatar of AlHal2

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.
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.
Avatar of AlHal2

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.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);
Avatar of AlHal2

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_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>
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.
Avatar of AlHal2

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 = '';
ASKER CERTIFIED SOLUTION
Avatar of AlHal2
AlHal2
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
Avatar of AlHal2

ASKER

I've reposted the question, hopefully phrasing it more succinctly.