Web Analytics Made Easy -
StatCounter move from onelist box to another using ctrl key - CodingForum

Announcement

Collapse
No announcement yet.

move from onelist box to another using ctrl key

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • move from onelist box to another using ctrl key

    Hi Frnds

    I am working on copying from one listbox to another. The value should not be removed from first list box. I am trying to select multiple values using ctrl key for copying. can someone give some idea or sample code for this.
    Your help is appreciated.

    Thanks

  • #2
    here's a link to something similar. You will have to figure out how to copy instead of move the lists, but it's a good start
    http://hedgerwow.com/360/dhtml/ui_mo...odule_move.php

    Comment


    • #3
      This should move you forward, but I don't think that it is possible to move multiple selections in one go using a control key.

      Code:
      <form name='myform'>
      <select name = 'list1' id = 'list1' onchange = "removeOptions(this)">
      <option selected value=""> Choose A Fruit</option>
      <option value='Mango'> Mango </option>
      <option value='Apple'> Apple </option>
      <option value='Sunkist'> Sunkist </option>
      <option value='Watermelon'> Watermelon </option>
      <option value='Papaya'> Papaya </option>
      <option value='Strawberry'> Strawberry </option>
      <option value='Banana'> Banana </option>
      <option value='Peach'> Peach </option>
      </select>
      
      <select name = 'list2' id = 'list2'>
      <option value = ""> You have selected:- </option>
      </select>
      
      </form>
      
      <script type = "text/javascript">
      var val = "";
      function removeOptions(selectbox) {
      val = selectbox.value;
      for (var i = selectbox.options.length-1; i>=1; i--) {
      if (selectbox.options[i].selected) {
      [COLOR="Blue"]selectbox.remove(i);[/COLOR]
      addOption(document.myform.list2,val,val);
      document.myform.list1.focus();
      }
      }
      }
      
      function addOption(selectbox,optiontext,optionvalue )
      {
      var optn = document.createElement("OPTION");
      optn.text = optiontext;
      optn.value = optionvalue;
      selectbox.options.add(optn);
      }
      
      </script>
      If you do not want to remove the option from the original list, delete or comment out the line in blue. But of course the user can then select that option more than once (but not twice in succession).


      Quizmaster: Charles who is said to be the father of modern electronic computing?
      Contestant: Darwin.
      Last edited by Philip M; Apr 16, 2009, 12:28 PM.

      All the code given in this post has been tested and is intended to address the question asked.
      Unless stated otherwise it is not just a demonstration.

      Comment


      • #4
        Hi frnd


        Thank you , This is good but I want to select the values randomly to be copied holding ctrl key . The code what you gave is copying when it is clicked.

        I would greatly appreciate if you can give me that code

        Thanks a lot

        Comment


        • #5
          Originally posted by javaguy1007 View Post
          Hi frnd


          Thank you , This is good but I want to select the values randomly to be copied holding ctrl key . The code what you gave is copying when it is clicked.

          I would greatly appreciate if you can give me that code

          Thanks a lot
          I thought that I had explained that cannot be done.

          All the code given in this post has been tested and is intended to address the question asked.
          Unless stated otherwise it is not just a demonstration.

          Comment


          • #6
            Hey javaguy. Give this a shot. Tested in IE6 and FF3.
            The comment in the following post is flat out wrong. The code totally works.
            User does not need to hold down control key while selecting.
            That is totally false. It's a "multiple" select list. You can't select more than one option without holding down the CTRL key. Jeez. If you can't test it, don't bash it.

            Code:
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
            <html>
            <head>
            <title>Form</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <script type="text/javascript">	
            
            	var IE = false;
            	if (navigator.appName == "Microsoft Internet Explorer"){IE = true;}
            
            	function fillList(nList,nData){
            
            		var nOption = document.createElement('option'); 
            		nOption.value = nData.value;	
            		nOption.appendChild(document.createTextNode(nData.text)); 
            		document.forms[0][nList].appendChild(nOption); 
            	}
            
            	function clearList(nList){
            
            		var nOptions = document.forms[0][nList];
            		while (nOptions.lastChild)
            			{
            		 	 nOptions.removeChild(nOptions.lastChild);
            			}
            	}	
            
            	function xferOptions(evt){
            
            		var key = (window.Event) ? evt.which : evt.keyCode;
            		if (key != 17){return false;}
            		clearList('destination');
            		var nOptions = document.forms[0]['source'];
            		for (i=0; i<nOptions.options.length; i++)
            			{
            			 if (nOptions[i].selected)
            				{		
            				 fillList('destination',nOptions[i]);
            				 nOptions[i].selected = false;
            				}
            			}
            	}	
            
            	function init(){
            
            		if (IE)	{
            			 document.forms[0].onkeyup = function()
            				{
            			 	 xferOptions(event);
            				}
            			}
            		else 	{
            			 document.forms[0].onkeyup = function(event)
            				{			 
            			 	 xferOptions(event);
            				}
            			}	
            		document.forms[0]['destination'].onchange = function()
            			{
            			 alert(this.value);
            			}
            	}
            
            	IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
            
            </script>
            <style type="text/css">
            
            	body {background-color: #fffacd; margin-top: 60px;}
            	select {font-family: arial; font-size: 10pt; width: 150px; margin-top: 10px; margin-bottom: 10px;}
            	label {position: relative; top: -110px; font-family: tahoma; font-size: 9pt; font-weight: bold; margin-left: 10px;}
            
            </style>
            </head>
            	<body>
            
            		<h3> 
            		     Hold down the CTRL key, click the desired options in the "Source" list,<br>
            		     release the CTRL key to copy those options to the "Destination" list.	
            		</h3>
            
            		<form action="" method="post">
            
            			<label> Source List </label>
            			<select name="source" size="10" multiple>    
            				<option value="1"> One </option>
            				<option value="2"> Two </option>
            				<option value="3"> Three </option>
            				<option value="4"> Four </option>
            				<option value="5"> Five </option>                            	
                                    </select>			
            			
            			<br><br>			
            
            			<label> Destination List </label>
            			<select name="destination" size="10" multiple>
            			</select>
            
            		</form>
            	</body>
            </html>
            Last edited by 12 Pack Mack; Apr 17, 2009, 11:21 AM.

            Comment


            • #7
              Problem is that it only works once.

              e.g. if you select "one, two and three" it places those in the second list, but
              if you then select "four and five" these values replace the previous ones. So it is not possible to select one, three and five. Still less five, three and one which my script permitted.

              User does not need to hold down control key while selecting. Rather, having selected one or more items, pressing and then releasing the control key will effect the transfer. I don't see how this is any easier or simpler or whatever than clicking.

              OP says "I want to select the values randomly to be copied holding ctrl key" - I don't understand what is meant by "randomly". But if in fact he means something like e.g. four two one five then as I see it this script does not meet his needs.
              Last edited by Philip M; Apr 17, 2009, 11:12 AM.

              All the code given in this post has been tested and is intended to address the question asked.
              Unless stated otherwise it is not just a demonstration.

              Comment

              Working...
              X