Solved

Double select control

Posted on 1998-06-24
10
183 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
ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

 
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

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

773 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