Solved

Use dropdown box selection to add items to listbox.

Posted on 2014-01-20
12
231 Views
Last Modified: 2014-01-31
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.
0
Comment
Question by:AlHal2
  • 7
  • 5
12 Comments
 

Author Comment

by:AlHal2
ID: 39796370
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
 
LVL 9

Expert Comment

by:Sar1973
ID: 39796558
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
 

Author Comment

by:AlHal2
ID: 39796630
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
 
LVL 9

Expert Comment

by:Sar1973
ID: 39796657
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
 

Author Comment

by:AlHal2
ID: 39796790
Do you have some sample code?
0
 
LVL 9

Expert Comment

by:Sar1973
ID: 39796994
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:AlHal2
ID: 39797483
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
 
LVL 9

Expert Comment

by:Sar1973
ID: 39799601
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
 

Author Comment

by:AlHal2
ID: 39799728
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
 

Accepted Solution

by:
AlHal2 earned 0 total points
ID: 39799959
Please forget the code I sent you.  It didn't work, so ignore it.
0
 
LVL 9

Expert Comment

by:Sar1973
ID: 39800256
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
 

Author Closing Comment

by:AlHal2
ID: 39823560
I've reposted the question, hopefully phrasing it more succinctly.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now