Solved

Double select control

Posted on 1998-06-24
10
180 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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 200 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

895 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

14 Experts available now in Live!

Get 1:1 Help Now