?
Solved

Use dropdown box selection to add items to listbox.

Posted on 2014-01-20
12
Medium Priority
?
239 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
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
 

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses

777 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