Solved

Double select control

Posted on 1998-06-24
10
189 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
[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
  • 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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
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
 
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

Independent Software Vendors: 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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

688 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