Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Toggling Values Between <select> boxes...

    Hello, all. If you open the following code (written primarily by a generous member of this forum [I think it was this one?] ) in your browser, you'll notice that there are two select boxes in which you can toggle values back and forth. It works perfectly except for being able to select multiple values from the second box and return them to the first. Any idea on what's causing this?

    Code:
    <html>
    
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    	<title>Maintain Relationships</title>
    
    	<link rel="StyleSheet" href="stormy.css" media="screen" type="text/css" />
    </head>
    
    <body class="text8">
    
    <script language="javascript">
    <!--	
    	function SendToAndRemove()
    	{
    		var Sel1=document.Relationships.selectName1;
    		var Sel2=document.Relationships.selectName2;
    		var len1=Sel1.length;
    		var len2=Sel2.length;
    
    		for(i=0; i<Sel1.length; i++)
    		{
    			found=false;
    			if(Sel1.options[i].selected)
    			{
    				for(j=0; j<Sel2.length; j++)
    				{
    					if(Sel2.options[j].value == Sel1.options[i].value)
    					{
    						found=true;
    					}
    				}
    				if(found == false)
    				{
    					Sel2.options[Sel2.length]=new
    					Option(Sel1.options[i].value, Sel1.options[i].text);
    				}
    				Sel1.options[i]=null;
    				len1--;
    				i--;
    			}
    		}			
    	}
    	
    	function SendBack()
    	{
    		var Sel1=document.Relationships.selectName1;
    		var Sel2=document.Relationships.selectName2;
    		var len2=Sel2.length;
    		var len1=Sel1.length;
    		
    		for(i=0; i<Sel2.length; i++)
    		{
    			found=false;
    			if(Sel2.options[i].selected)
    			{
    				for(j=0; j<Sel1.length; j++)
    				{
    					if(Sel1.options[j].value == Sel1.options[i].value)
    					{
    						found=true;
    					}
    				}
    				if(found == false)
    				{
    					Sel1.options[Sel1.length]=new
    					Option(Sel2.options[i].value, Sel2.options[i].text);
    				}
    				Sel2.options[i]=null;
    				len2--;
    				i--;
    			}
    		}				
    	}	
    //-->
    </script>
    
    <center>
    <form id="Relationships" name="Relationships" method="post">
    <div style="border:solid gray 0px; width:700px">
    	<div style="float:left; border:solid yellow 0px; text-align:left; margin:0px 15px 0px 0px; padding:10px; background:rgb(230, 230, 240)">
    	</div>
    	<div style="float:left">
    		<div style="float:left; border:solid red 0px">
    			<select id="selectName1" name="selectName1" multiple size="10" style="width:300px">
    				<option id="" value="carr1">carr1</option>
    				<option id="" value="carr2">carr2</option>
    				<option id="" value="carr3">carr3</option>
    			</select>
    		</div>
    		<div style="float:left">
    		</div>
    		<div style="clear:both; margin:5px 0px 10px 0px; text-align:left">
    			<input type="button" class="text8" value="Add Selection(s) as Relationship(s)" onClick="SendToAndRemove();">
    		</div>
    		<div style="clear:both; float:left; border:solid green 0px">
    			<div style="margin:10px 0px 0px 0px; text-align:left">
    
    			</div>
    			<div style="text-align:left">
    				<select id="selectName2" name="selectName2" multiple size="5" style="width:300px">
    				</select>
    			</div>
    		</div>
    		<div style="float:left; margin:30px 0px 0px 0px; text-align:left">
    			<input type="button" class="text8" value="Remove" onClick="SendBack();"><br />
    		</div>
    	</div>
    </div>
    </form>
    </center>
    </body>
    
    </html>
    Thank you very much for any assistance.

    bubbis

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    vw,

    I really appreciate the code, but it does not do a couple of things that I seek to accomplish (referring to boxes 2 and 3 from the link that you've provided):

    1) The code allows for one value to appear multiple times in either box and
    2) Box 2 does not remove a value when sent to box 3.

    I understand that box 2 was not supposed to remove values, but, respectfully, I already know how to do that. I'm surprised that my code (once again, I had a lot of help from another coder) does not work, seeing that the first function works properly, and the second function is for all intensive purposes the exact same thing.

    Thanks again, vw, for taking the time to assist me.

    bubbis

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    1) The code allows for one value to appear multiple times in either box and
    2) Box 2 does not remove a value when sent to box 3.
    1) this may need an additional option

    2) this option has not been selected for selectlist 2 (see application notes)

    may look to implement 1) if important

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    I presume that if the option to be added duplicates an existing option you do not want the option removed from the source selectList

    please confirm

    anyway if so replace function f15_Add() with

    Code:
    function f15_Add(){
     for (zxc0=f15_FirstMove;zxc0<f15_Source.options.length;zxc0++){
      if (f15_Source.options[zxc0].selected){
       var zxcadd=true;
       for (zxc0A=0;zxc0A<f15_Target.options.length;zxc0A++){
        if (f15_Target.options[zxc0A].text==f15_Source.options[zxc0].text){
         f15_Source.options[zxc0].selected=false;
         zxcadd=false;
        }
       }
       if (zxcadd){
        f15_Target.opts[f15_Target.opts.length]=f15_Source.options[zxc0];
       }
      }
     }
     if (f15_Target.sort=='Sort'){
      f15_Sort(f15_Target.opts);
     }
     f15_Target.options.length=0;
     f15_Target.strg='';
     for (f15_1=0;f15_1<f15_Target.opts.length;f15_1++){
      f15_Target.options[f15_1]=new Option(f15_Target.opts[f15_1].text,f15_Target.opts[f15_1].value,true,true);
      f15_Target.strg+=f15_Target.opts[f15_1].text+'^'+f15_Target.opts[f15_1].value+',';
     }
     f15_Target.selectedIndex=-1;
     f15_Target.htb.value=f15_Target.strg
    }
    Last edited by vwphillips; 01-23-2006 at 05:50 PM.

  • #6
    New Coder
    Join Date
    Jul 2005
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll try altering the code to which you referred me to accomplish my task.

    Thanks again for taking the time to help me,

    bubbis

  • #7
    New Coder
    Join Date
    Jul 2005
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips
    I presume that if the option to be added duplicates an existing option you do not want the option removed from the source selectList

    please confirm
    Confirmed. There are two scenarios:

    1) Take an item (or items) from list 1, transfer it (them) to list 2. In this case, the item(s) from list 1 would be removed, and added to list 2.

    2) Vice Versa... Take an item (or items) from list 2, transfer it (them) to list 1. In this case, the item(s) from list 2 would be removed, and added to list 1.

    Thank you,

    bubbis

    EDIT: The code that I provided at the beginning of this thread accomplishes "1)" above. I can even move one item from list 2 back to list 1. It's only when I try to move multiple items from list 2 to list 1 things do not work properly.
    Last edited by bubbisthedog; 01-23-2006 at 05:49 PM.

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    reolace function f15_Add() with
    Code:
    function f15_Add(){
     for (zxc0=f15_FirstMove;zxc0<f15_Source.options.length;zxc0++){
      if (f15_Source.options[zxc0].selected){
       var zxcadd=true;
       for (zxc0A=0;zxc0A<f15_Target.options.length;zxc0A++){
        if (f15_Target.options[zxc0A].text==f15_Source.options[zxc0].text){
         f15_Source.options[zxc0].selected=false;
         zxcadd=false;
        }
       }
       if (zxcadd){
        f15_Target.opts[f15_Target.opts.length]=f15_Source.options[zxc0];
       }
      }
     }
     if (f15_Target.sort=='Sort'){
      f15_Sort(f15_Target.opts);
     }
     f15_Target.options.length=0;
     f15_Target.strg='';
     for (f15_1=0;f15_1<f15_Target.opts.length;f15_1++){
      f15_Target.options[f15_1]=new Option(f15_Target.opts[f15_1].text,f15_Target.opts[f15_1].value,true,true);
      f15_Target.strg+=f15_Target.opts[f15_1].text+'^'+f15_Target.opts[f15_1].value+',';
     }
     f15_Target.selectedIndex=-1;
     f15_Target.htb.value=f15_Target.strg
    }

  • #9
    New Coder
    Join Date
    Jul 2005
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot for your help, vw! It's going to take me some time to get the HTML implemented for your functions; I'll post back with the results when I've done all I can.

    Thanks again for your generosity, vw.

    bubbis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •