API tools faq
paste
Advertisement
gitlez

YA: Multiple Selection Box Modification

gitlez
Oct 4th, 2011
179
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 11.15 KB | None | 0 0
raw download clone embed print report
  1. <?php
  2. /*
  3.     Modified  http://www.dhtmlgoodies.com/scripts/multiple_select/multiple_select.html
  4.     For a Yahoo Answer's Question http://answers.yahoo.com/question/index?qid=20111003142829AALCskT
  5. */
  6.  
  7. // Defaults;
  8. $dbString = 'Canada,France,United Kingdom'; // To be pulled from Database
  9. $toPool = explode(',', $dbString);
  10. $pool = Array('Canada','Finland','France','Germany','Mexico','Norway','Spain','United Kingdom','United States');
  11. $message = 'Please Select Desired Countries';
  12. if($_SERVER['REQUEST_METHOD'] == 'POST'){
  13.     $toPool = (count($_POST['toBox']) > 0)? $_POST['toBox'] : Array();
  14.     $newDbString = implode(',', $toPool); //  Store in Database;
  15.     $message = 'Selected Countries: ' . implode(', ', $toPool); // Just a way to show selection for you to verify.
  16. }
  17. $fromPool = array_diff($pool, $toPool);
  18. ?>
  19. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  20. <html>
  21. <head>
  22.     <title>Multiple select boxes</title>
  23.     <style type="text/css">
  24.     body{
  25.         background-color:#FFF;
  26.         font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
  27.     }
  28.  
  29.     .multipleSelectBoxControl span{    /* Labels above select boxes*/
  30.         font-family:arial;
  31.         font-size:11px;
  32.         font-weight:bold;
  33.     }
  34.     .multipleSelectBoxControl div option{    /* Select box layout */
  35.         font-family:arial;
  36.    
  37.     }
  38.    
  39.     .multipleSelectBoxControl div select{    
  40.        
  41.         height:100%;
  42.     }
  43.     .multipleSelectBoxControl input{    /* Small butons */
  44.         width:25px;    
  45.     }
  46.    
  47.     .multipleSelectBoxControl div{
  48.         float:left;
  49.     }
  50.        
  51.     fieldset{
  52.         width:500px;
  53.         margin:10px;
  54.     }
  55.     img{
  56.         border:0px;
  57.     }
  58.     </style>
  59.     <script type="text/javascript">
  60.    
  61.     /************************************************************************************************************
  62.     (C) www.dhtmlgoodies.com, October 2005
  63.    
  64.     This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.    
  65.    
  66.     Terms of use:
  67.     You are free to use this script as long as the copyright message is kept intact. However, you may not
  68.     redistribute, sell or repost it without our permission.
  69.    
  70.     Thank you!
  71.    
  72.     www.dhtmlgoodies.com
  73.     Alf Magne Kalleland
  74.    
  75.     ************************************************************************************************************/
  76.    
  77.        
  78.     var fromBoxArray = new Array();
  79.     var toBoxArray = new Array();
  80.     var selectBoxIndex = 0;
  81.     var arrayOfItemsToSelect = new Array();
  82.    
  83.    
  84.     function moveSingleElement()
  85.     {
  86.         var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^\d]/g,'');
  87.         var tmpFromBox;
  88.         var tmpToBox;
  89.         if(this.tagName.toLowerCase()=='select'){            
  90.             tmpFromBox = this;
  91.             if(tmpFromBox==fromBoxArray[selectBoxIndex])tmpToBox = toBoxArray[selectBoxIndex]; else tmpToBox = fromBoxArray[selectBoxIndex];
  92.         }else{
  93.        
  94.             if(this.value.indexOf('>')>=0){
  95.                 tmpFromBox = fromBoxArray[selectBoxIndex];
  96.                 tmpToBox = toBoxArray[selectBoxIndex];            
  97.             }else{
  98.                 tmpFromBox = toBoxArray[selectBoxIndex];
  99.                 tmpToBox = fromBoxArray[selectBoxIndex];    
  100.             }
  101.         }
  102.        
  103.         for(var no=0;no<tmpFromBox.options.length;no++){
  104.             if(tmpFromBox.options[no].selected){
  105.                 tmpFromBox.options[no].selected = false;
  106.                 tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);
  107.                
  108.                 for(var no2=no;no2<(tmpFromBox.options.length-1);no2++){
  109.                     tmpFromBox.options[no2].value = tmpFromBox.options[no2+1].value;
  110.                     tmpFromBox.options[no2].text = tmpFromBox.options[no2+1].text;
  111.                     tmpFromBox.options[no2].selected = tmpFromBox.options[no2+1].selected;
  112.                 }
  113.                 no = no -1;
  114.                 tmpFromBox.options.length = tmpFromBox.options.length-1;
  115.                                            
  116.             }            
  117.         }
  118.        
  119.        
  120.         var tmpTextArray = new Array();
  121.         for(var no=0;no<tmpFromBox.options.length;no++){
  122.             tmpTextArray.push(tmpFromBox.options[no].text + '___' + tmpFromBox.options[no].value);            
  123.         }
  124.         tmpTextArray.sort();
  125.         var tmpTextArray2 = new Array();
  126.         for(var no=0;no<tmpToBox.options.length;no++){
  127.             tmpTextArray2.push(tmpToBox.options[no].text + '___' + tmpToBox.options[no].value);            
  128.         }        
  129.         tmpTextArray2.sort();
  130.        
  131.         for(var no=0;no<tmpTextArray.length;no++){
  132.             var items = tmpTextArray[no].split('___');
  133.             tmpFromBox.options[no] = new Option(items[0],items[1]);
  134.            
  135.         }        
  136.        
  137.         for(var no=0;no<tmpTextArray2.length;no++){
  138.             var items = tmpTextArray2[no].split('___');
  139.             tmpToBox.options[no] = new Option(items[0],items[1]);            
  140.         }
  141.     }
  142.    
  143.     function sortAllElement(boxRef)
  144.     {
  145.         var tmpTextArray2 = new Array();
  146.         for(var no=0;no<boxRef.options.length;no++){
  147.             tmpTextArray2.push(boxRef.options[no].text + '___' + boxRef.options[no].value);            
  148.         }        
  149.         tmpTextArray2.sort();        
  150.         for(var no=0;no<tmpTextArray2.length;no++){
  151.             var items = tmpTextArray2[no].split('___');
  152.             boxRef.options[no] = new Option(items[0],items[1]);            
  153.         }        
  154.        
  155.     }
  156.     function moveAllElements()
  157.     {
  158.         var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^\d]/g,'');
  159.         var tmpFromBox;
  160.         var tmpToBox;        
  161.         if(this.value.indexOf('>')>=0){
  162.             tmpFromBox = fromBoxArray[selectBoxIndex];
  163.             tmpToBox = toBoxArray[selectBoxIndex];            
  164.         }else{
  165.             tmpFromBox = toBoxArray[selectBoxIndex];
  166.             tmpToBox = fromBoxArray[selectBoxIndex];    
  167.         }
  168.        
  169.         for(var no=0;no<tmpFromBox.options.length;no++){
  170.             tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);            
  171.         }    
  172.        
  173.         tmpFromBox.options.length=0;
  174.         sortAllElement(tmpToBox);
  175.        
  176.     }
  177.    
  178.    
  179.     /* This function highlights options in the "to-boxes". It is needed if the values should be remembered after submit. Call this function onsubmit for your form */
  180.     function multipleSelectOnSubmit()
  181.     {
  182.         for(var no=0;no<arrayOfItemsToSelect.length;no++){
  183.             var obj = arrayOfItemsToSelect[no];
  184.             for(var no2=0;no2<obj.options.length;no2++){
  185.                 obj.options[no2].selected = true;
  186.             }
  187.         }
  188.        
  189.     }
  190.    
  191.     function createMovableOptions(fromBox,toBox,totalWidth,totalHeight,labelLeft,labelRight)
  192.     {        
  193.         fromObj = document.getElementById(fromBox);
  194.         toObj = document.getElementById(toBox);
  195.        
  196.         arrayOfItemsToSelect[arrayOfItemsToSelect.length] = toObj;
  197.  
  198.        
  199.         fromObj.ondblclick = moveSingleElement;
  200.         toObj.ondblclick = moveSingleElement;
  201.  
  202.        
  203.         fromBoxArray.push(fromObj);
  204.         toBoxArray.push(toObj);
  205.        
  206.         var parentEl = fromObj.parentNode;
  207.        
  208.         var parentDiv = document.createElement('DIV');
  209.         parentDiv.className='multipleSelectBoxControl';
  210.         parentDiv.id = 'selectBoxGroup' + selectBoxIndex;
  211.         parentDiv.style.width = totalWidth + 'px';
  212.         parentDiv.style.height = totalHeight + 'px';
  213.         parentEl.insertBefore(parentDiv,fromObj);
  214.        
  215.        
  216.         var subDiv = document.createElement('DIV');
  217.         subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
  218.         fromObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
  219.  
  220.         var label = document.createElement('SPAN');
  221.         label.innerHTML = labelLeft;
  222.         subDiv.appendChild(label);
  223.        
  224.         subDiv.appendChild(fromObj);
  225.         subDiv.className = 'multipleSelectBoxDiv';
  226.         parentDiv.appendChild(subDiv);
  227.        
  228.        
  229.         var buttonDiv = document.createElement('DIV');
  230.         buttonDiv.style.verticalAlign = 'middle';
  231.         buttonDiv.style.paddingTop = (totalHeight/2) - 50 + 'px';
  232.         buttonDiv.style.width = '30px';
  233.         buttonDiv.style.textAlign = 'center';
  234.         parentDiv.appendChild(buttonDiv);
  235.        
  236.         var buttonRight = document.createElement('INPUT');
  237.         buttonRight.type='button';
  238.         buttonRight.value = '>';
  239.         buttonDiv.appendChild(buttonRight);    
  240.         buttonRight.onclick = moveSingleElement;    
  241.        
  242.         var buttonAllRight = document.createElement('INPUT');
  243.         buttonAllRight.type='button';
  244.         buttonAllRight.value = '>>';
  245.         buttonAllRight.onclick = moveAllElements;
  246.         buttonDiv.appendChild(buttonAllRight);        
  247.        
  248.         var buttonLeft = document.createElement('INPUT');
  249.         buttonLeft.style.marginTop='10px';
  250.         buttonLeft.type='button';
  251.         buttonLeft.value = '<';
  252.         buttonLeft.onclick = moveSingleElement;
  253.         buttonDiv.appendChild(buttonLeft);        
  254.        
  255.         var buttonAllLeft = document.createElement('INPUT');
  256.         buttonAllLeft.type='button';
  257.         buttonAllLeft.value = '<<';
  258.         buttonAllLeft.onclick = moveAllElements;
  259.         buttonDiv.appendChild(buttonAllLeft);
  260.        
  261.         var subDiv = document.createElement('DIV');
  262.         subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
  263.         toObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
  264.  
  265.         var label = document.createElement('SPAN');
  266.         label.innerHTML = labelRight;
  267.         subDiv.appendChild(label);
  268.                
  269.         subDiv.appendChild(toObj);
  270.         parentDiv.appendChild(subDiv);        
  271.        
  272.         toObj.style.height = (totalHeight - label.offsetHeight) + 'px';
  273.         fromObj.style.height = (totalHeight - label.offsetHeight) + 'px';
  274.  
  275.            
  276.         selectBoxIndex++;
  277.        
  278.     }
  279.    
  280.    
  281.    
  282.     </script>    
  283. </head>
  284. <body>
  285.     <div id="message">
  286.         <?php echo $message; ?>
  287.     </div>
  288. <fieldset>
  289.     <legend>Multiple select boxes</legend>
  290. <form method="post" action="" onsubmit="multipleSelectOnSubmit()">
  291. <select multiple name="fromBox[]" id="fromBox">
  292. <?php
  293. foreach($fromPool as $itm){
  294.     echo "\t" . '<option value="' . $itm . '">' . $itm . '</option>' . PHP_EOL;
  295. }
  296. ?>
  297. </select>
  298. <select multiple name="toBox[]" id="toBox">
  299. <?php
  300. foreach($toPool as $itm){
  301.     echo "\t" . '<option value="' . $itm . '">' . $itm . '</option>' . PHP_EOL;
  302. }
  303. ?>
  304. </select>
  305. <input type="submit" value="OK">
  306. </form>
  307. </fieldset>
  308. <script type="text/javascript">
  309. createMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries');
  310. </script>
  311. <p>You move elements by clicking on the buttons or by double clicking on select box items</p>
  312. </body>
  313. </html>
  314.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!