Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Double select control

Posted on 1998-06-24
10
Medium Priority
?
190 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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 …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

670 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