Improve company productivity with a Business Account.Sign Up

x
?
Solved

Double select control

Posted on 1998-06-24
10
Medium Priority
?
193 Views
Last Modified: 2008-03-17
I need a simple javascript to control two select boxes much in the same way that is found in many windows apps for a cgi script I'm building.

The selects look something like this :

--------------------                                 --------------------
|  val1              |        |  <- Add    |      |  val3                |
|  val2              |                                 |                         |
|                       |        | Delete -> |      |                         |
--------------------                                 ---------------------

If I were to select val3 in the right hand select box and then hit the add button it would transfer val3 from the right hand select to the left hand one. Conversely, if I were to select something from the lefthand box and hit delete it would move it to the right hand one.

I'm only really interested in the contents of the left hand box as it is this that will be handed to my cgi.

I know I could effectively do the same functionality with a single <SELECT MULTIPLE> but have been requested to do it this way (above).

200 points for a fast answer!


Ta
Marty
0
Comment
Question by:mravell
  • 7
  • 2
10 Comments
 

Author Comment

by:mravell
ID: 1265976
It would be nice if the script could handle transfering MULTIPLE options between the two boxes in a single click (ie both the SELECTs using MULTIPLE)

M
0
 
LVL 4

Expert Comment

by:martinag
ID: 1265977
I will soon have a answer to this. I think.
I have just one small thing to fix
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1265978
me too

Michel
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 600 total points
ID: 1265979
<HTML>
<HEAD>
<SCRIPT>

function addProducts() {
   if (document.FORM2.FROMSEL.selectedIndex==-1) return; // Did we select anything?
   for (i=document.FORM2.FROMSEL.selectedIndex,n=document.FORM2.FROMSEL.options.length;i<n;i++) { // loop though the right select
      if (document.FORM2.FROMSEL.options[i].selected) {
           j = document.FORM1.TOSEL.options.length;
         document.FORM1.TOSEL.options.length++;
           document.FORM1.TOSEL.options[j].text  = document.FORM2.FROMSEL.options[i].text;
           document.FORM1.TOSEL.options[j].value = document.FORM2.FROMSEL.options[i].value;
           document.FORM2.FROMSEL.options[i].text  = '';
           document.FORM2.FROMSEL.options[i].value = '';
        }
   }
   alert(document.FORM2.FROMSEL.options.length);
   for (j=0,i=0,n=document.FORM2.FROMSEL.options.length;i<n;i++) { // loop though the right select  
      if (document.FORM2.FROMSEL.options[i].value !='') {
           document.FORM2.FROMSEL.options[j].text  = document.FORM2.FROMSEL.options[i].text
           document.FORM2.FROMSEL.options[j].value = document.FORM2.FROMSEL.options[i].value
             j++
        }
   }
   document.FORM2.FROMSEL.options.length = j;
}
function delProducts() {
   if (document.FORM1.TOSEL.selectedIndex==-1) return; // Did we select anything?
   for (i=document.FORM1.TOSEL.options.selectedIndex,n=document.FORM1.TOSEL.options.length;i<n;i++) { // loop though the left select
      if (document.FORM1.TOSEL.options[i].selected) {
           j = document.FORM2.FROMSEL.options.length;
             document.FORM2.FROMSEL.options.length++;
           document.FORM2.FROMSEL.options[j].text  = document.FORM1.TOSEL.options[i].text;
           document.FORM2.FROMSEL.options[j].value = document.FORM1.TOSEL.options[i].value;
           document.FORM1.TOSEL.options[i].text  = '';
           document.FORM1.TOSEL.options[i].value = '';
        }
   }       
   for (j=0,i=0,n=document.FORM1.TOSEL.options.length;i<n;i++) { // loop though the left select  
      if (document.FORM1.TOSEL.options[i].value !='') {
           document.FORM1.TOSEL.options[j].text  = document.FORM1.TOSEL.options[i].text
           document.FORM1.TOSEL.options[j].value = document.FORM1.TOSEL.options[i].value
             j++
      }
   }
   document.FORM1.TOSEL.options.length = j;
   
}

</SCRIPT>
</HEAD>
<BODY>
<TABLE><TR><TD>
<FORM NAME="FORM1">
<SELECT NAME="TOSEL" SIZE="10" MULTIPLE>
<OPTION VALUE="0">Product 0
<OPTION VALUE="1">Product 1
<OPTION VALUE="2">Product 2
<OPTION VALUE="3">Product 3
<OPTION VALUE="4">Product 4
</SELECT>
</FORM>
</TD>
<TD ALIGN="CENTER"><FORM><INPUT TYPE="BUTTON" VALUE="DELETE->" ONCLICK="delProducts()">
<BR><INPUT TYPE="BUTTON" VALUE="   <-ADD   " ONCLICK="addProducts()"></FORM>
</TD>
<TD>
<FORM NAME="FORM2">
<SELECT NAME="FROMSEL" SIZE="10" MULTIPLE>
<OPTION VALUE="5">Product 5
<OPTION VALUE="6">Product 6
<OPTION VALUE="7">Product 7
<OPTION VALUE="8">Product 8
<OPTION VALUE="9">Product 9
</SELECT>
</FORM>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1265980
Sorry, an alert snuck in there...

Michel
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1265981
Could you use my answer?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1265982
Any news?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1265983
MRavell: Wasn't 2 hours fast enough? ;-)
Please grade the answer

Michel
0
 

Author Comment

by:mravell
ID: 1265984
Hi Michel,

Sorry about the delay in answering. I'd actually gone offline (through a network outage) and worked out another solution on my own. (And havn't been in Experts-exchange since)

There is nothing like having your back to the wall to get those creative juices flowing!

I appreciate your time and even though I didn't get to use your stuff here are the points!  ;)


Regards
Marty

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 1265985
Thanks, Marty - I appreciate you coming back...

I agree on the back against the wall, some of my best work was done 1/2 hour before deadline...

May I ask what you used instead and also if you looked at my solution and liked it regardless?

Michel
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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-…
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…

588 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