login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Lijst samenstellen door velden te selecteren uit een lijst. (Opgelost)

Offline Jorisvh - 10/06/2014 21:12
Avatar van JorisvhLid Hoe kan ik het volgende realiseren met php en javascript? Ik vind hiervan niet direct een oplossing.

Zie: http://www.picp...cN4aJE.jpg

Bedoeling is om met > de velden te selecteren in de linkerkolom die moeten worden weergegeven in de lijst. De volgorde wordt weergegeven in de rechtse kolom.
Met < wordt het geselecteerde veld verwijderd uit de rechterkolom.

Waar kan ik hiervan een werkend voorbeeld zien?

6 antwoorden

Gesponsorde links
Offline Thomas - 11/06/2014 01:26
Avatar van Thomas Moderator Dit zal voornamelijk een JavaScript aangelegenheid zijn, je hebt "enkel" PHP nodig om de lijst(en) te voorzien van waarden en initiële selecties maar dit is waarschijnlijk voor je vraagstuk (in vergelijking met de rest) triviaal (is onderdeel van de initialisatie van je gegevens).

Heb je al gezocht op "multiselect" in combinatie met jQuery (een JavaScript framework)?

Met de zoekopdracht "jquery multi select list" vind je vele varianten. Tenzij je je eigen ding wilt rollen? Je bent niet de eerste persoon die naar deze functionaliteit zoekt dus grote kans dat iemand anders jouw wiel al heeft uitgevonden.
Offline Wijnand - 11/06/2014 09:35
Avatar van Wijnand Moderator Voorbeeld 'Selected and Disabled Support' bij deze: http://harvesthq.github.io/chosen/

Is zelfde functionaliteit als jij wilt denk ik, alleen dan een stuk professioneler qua design.
Als je dan opslaat, dan kun je even kijken hoe dat in de POST komt met:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. echo '<pre>';
  3. print_r($_POST);
  4. echo '</pre>';
  5. exit();
  6. ?>


Mocht je verdere vragen of dingen hebben, dan hoor ik het graag.
Offline Thomas - 11/06/2014 17:55
Avatar van Thomas Moderator Eenvoudige variant, maakt gebruik van jQuery.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. header('Content-Type: text/html; charset=UTF-8');
  3.  
  4. // always use strings, otherwise json_encode will turn keys into strings, but leave numeric values untouched...
  5. $options = array(
  6.     '1' => 'een',
  7.     '2' => 'twee',
  8.     '3' => 'drie',
  9.     '4' => 'vier',
  10.     '5' => 'vijf',
  11. );
  12.  
  13. $selected = array(
  14.     '2',
  15.     '4',
  16. );
  17. ?>
  18. <!DOCTYPE html>
  19. <html>
  20. <head>
  21. <meta charset="UTF-8">
  22. <title>multiselect</title>
  23. <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  24. <script type="text/javascript">
  25. //<![CDATA[
  26. function moveselect() {
  27.     this.$form              = false; // quick ref: jQuery object of the form, to really select options on submit
  28.     this.$selectable        = false; // quick ref: jQuery object of selectable select-dropdown
  29.     this.$selected          = false; // quick ref: jQuery object of selected select-dropdown
  30.     this.$buttonSelect      = false;
  31.     this.$buttonUnselect    = false;
  32.  
  33.     this.options    = {}; // key-value pairs
  34.     this.selected   = []; // (unique) keys
  35.  
  36.     this.init = function(options) {
  37.         // init jQuery objects linked to HTML elements
  38.         this.$form              = $('#'+options.formid);
  39.         this.$selectable        = $('#'+options.id+'_selectable');
  40.         this.$selected          = $('#'+options.id+'_selected');
  41.         this.$buttonSelect      = $('#'+options.id+'_select');
  42.         this.$buttonUnselect    = $('#'+options.id+'_unselect');
  43.  
  44.         // init selectable/selected options
  45.         this.options = options.options; // all the options, to remember order
  46.         if (options.selected) {
  47.             this.selected = options.selected;
  48.         }
  49.  
  50.         // init listener events of buttons
  51.         var that = this;
  52.         // select
  53.         this.$buttonSelect.click(function(e) {
  54.             e.preventDefault();
  55.             // add the selected items to that.selected
  56.             that.$selectable.find(':selected').each(function() {
  57.                 that.selected[that.selected.length] = $(this).val();
  58.             });
  59.             // redraw
  60.             that.update();
  61.         });
  62.  
  63.         // unselect
  64.         this.$buttonUnselect.click(function(e) {
  65.             e.preventDefault();
  66.             // rebuild that.selected, clearing the selected items
  67.             that.selected = []; // reset
  68.             that.$selected.children().each(function() {
  69.                 if (!$(this).is(':selected')) {
  70.                     that.selected[that.selected.length] = $(this).val();
  71.                 }
  72.             });
  73.             // redraw
  74.             that.update();
  75.         });
  76.  
  77.         // when submitting the form, select all the selected items, otherwise nothing will be sent
  78.         this.$form.submit(function() {
  79.             that.$selected.find('option').each(function() {
  80.                 $(this).attr('selected', 'selected');
  81.             });
  82.         });
  83.  
  84.         // finally fill select boxes
  85.         this.update();
  86.     }
  87.  
  88.     // fill selects with (de)selected options
  89.     this.update = function() {
  90.         // first clear all
  91.         this.$selectable.html('');
  92.         this.$selected.html('');
  93.  
  94.         // traverse options
  95.         for (var k in this.options) {
  96.             // use k in arr for key check, use arr.indexOf(k) > -1 for value check
  97.             if (this.selected.indexOf(k) > -1) {
  98.                 this.$selected.append('<option value="'+k+'">'+this.options[k]+'</option>');
  99.             } else {
  100.                 this.$selectable.append('<option value="'+k+'">'+this.options[k]+'</option>');
  101.             }
  102.         }
  103.     }
  104. }
  105. //]]>
  106. </script>
  107. <style type="text/css">
  108. <!--
  109. div                         { margin: 0; padding: 0; border; 0; }
  110. div.moveselect              { width: 350px; }
  111. div.moveselect select       { width: 150px; }
  112. div.moveselect div.left     { display: block; float: left; width: 150px; }
  113. div.moveselect div.middle   { display: block; float: left; width: 50px; height: 50px; text-align: center; margin-top: 50px; }
  114. div.moveselect div.right    { display: block; float: left; width: 150px; }
  115. div.moveselect div.clear    { clear: both; }
  116. //-->
  117. </style>
  118. </head>
  119.  
  120. <body>
  121. <?php
  122. if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  123.     echo '<pre>'.print_r($_POST, true).'</pre>';
  124. }
  125. ?>
  126. <form id="theForm" action="<?php echo htmlentities($_SERVER['PHP_SELF'], ENT_QUOTES, 'UTF-8') ?>" method="post">
  127. <div class="moveselect" id="oms">
  128.     <div class="left">
  129.         <select id="oms_selectable" multiple="multiple" size="10">
  130.             <option value="">dummy</option>
  131.         </select>
  132.     </div>
  133.  
  134.     <div class="middle">
  135.         <button id="oms_select">&gt;</button>
  136.         <button id="oms_unselect">&lt;</button>
  137.     </div>
  138.  
  139.     <div class="right">
  140.         <select name="moveselect[]" id="oms_selected" multiple="multiple" size="10">
  141.             <option value="">dummy</option>
  142.         </select>
  143.     </div>
  144.     <div class="clear"><!-- clear --></div>
  145. </div>
  146. <br />
  147. <button type="submit">submit</button>
  148. </form>
  149.  
  150. <script type="text/javascript">
  151. //<![CDATA[
  152.     $().ready(function() {
  153.         var oms = new moveselect();
  154.         oms.init({
  155.             'id': 'oms',
  156.             'formid': 'theForm',
  157.             'options': <?php echo json_encode($options) ?>,
  158.             'selected': <?php echo json_encode($selected) ?>
  159.         });
  160.     });
  161. //]]>
  162. </script>
  163. </body>
  164. </html>
Bedankt door: Jorisvh
Offline Jorisvh - 11/06/2014 19:07 (laatste wijziging 11/06/2014 19:45)
Avatar van Jorisvh Lid Dank u FangorN!

Ik heb uw code getest en dat ziet er al héél goed uit!
Offline Thomas - 11/06/2014 19:53 (laatste wijziging 12/06/2014 10:53)
Avatar van Thomas Moderator Het zou ook mogelijk moeten zijn om op dezelfde pagina / in hetzelfde formulier meerdere "moveselects" aan te maken (dit heb ik eigenlijk niet eens getest ). Het enige waar je dan op moet letten is dat de namen van de id's beginnen met een vast voorvoegsel, en vervolgens maak je meerdere JavaScript-objecten van het type moveselect() aan.

En je zult dus ook een referentie naar de (unieke) naam van het formulier moeten opgeven om ervoor te zorgen dat op het moment van versturen alle opties in de "selected" selectbox ook daadwerkelijk geselecteerd worden, anders worden deze velden niet verstuurd. Deze referentie alleen is genoeg: de rest wordt door de moveselect-functionaliteit afgehandeld.

EDIT: twee moveselects werkt ook, vervang de body simpelweg door:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  3.     echo '<pre>'.print_r($_POST, true).'</pre>';
  4. }
  5. ?>
  6. <form id="theForm" action="<?php echo htmlentities($_SERVER['PHP_SELF'], ENT_QUOTES, 'UTF-8') ?>" method="post">
  7. <div class="moveselect" id="oms">
  8.     <div class="left">
  9.         <select id="oms_selectable" multiple="multiple" size="10">
  10.             <option value="">dummy</option>
  11.         </select>
  12.     </div>
  13.  
  14.     <div class="middle">
  15.         <button id="oms_select">&gt;</button>
  16.         <button id="oms_unselect">&lt;</button>
  17.     </div>
  18.  
  19.     <div class="right">
  20.         <select name="oms[]" id="oms_selected" multiple="multiple" size="10">
  21.             <option value="">dummy</option>
  22.         </select>
  23.     </div>
  24.     <div class="clear"><!-- clear --></div>
  25. </div>
  26. <br />
  27.  
  28. <div class="moveselect" id="oms2">
  29.     <div class="left">
  30.         <select id="oms2_selectable" multiple="multiple" size="10">
  31.             <option value="">dummy</option>
  32.         </select>
  33.     </div>
  34.  
  35.     <div class="middle">
  36.         <button id="oms2_select">&gt;</button>
  37.         <button id="oms2_unselect">&lt;</button>
  38.     </div>
  39.  
  40.     <div class="right">
  41.         <select name="oms2[]" id="oms2_selected" multiple="multiple" size="10">
  42.             <option value="">dummy</option>
  43.         </select>
  44.     </div>
  45.     <div class="clear"><!-- clear --></div>
  46. </div>
  47. <br />
  48. <button type="submit">submit</button>
  49. </form>
  50.  
  51. <script type="text/javascript">
  52. //<![CDATA[
  53.     $().ready(function() {
  54.         var oms = new moveselect();
  55.         oms.init({
  56.             'id': 'oms',
  57.             'formid': 'theForm',
  58.             'options': <?php echo json_encode($options) ?>,
  59.             'selected': <?php echo json_encode($selected) ?>
  60.         });
  61.  
  62.         var oms2 = new moveselect();
  63.         oms2.init({'id': 'oms2', 'formid': 'theForm', 'options': <?php echo json_encode($options) ?>});
  64.     });
  65. //]]>
  66. </script>

Op dezelfde manier kun je zoveel moveselects aanmaken als je wilt, de moveselect-functionaliteit kun je hergebruiken.

EDIT:
Aanpassing in de moveselect functie: het is nu mogelijk om opties in een custom volgorde te selecteren die onthouden wordt. Geef hiertoe bij de creatie de parameter 'customOrder': true mee.

De aangepaste code voor de moveselect (relevante delen regels 25-27, 74-88):
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function moveselect() {
  2.     this.$form              = false; // quick ref: jQuery object of the form, to really select options on submit
  3.     this.$selectable        = false; // quick ref: jQuery object of selectable select-dropdown
  4.     this.$selected          = false; // quick ref: jQuery object of selected select-dropdown
  5.     this.$buttonSelect      = false;
  6.     this.$buttonUnselect    = false;
  7.  
  8.     this.options    = {}; // key-value pairs
  9.     this.selected   = []; // (unique) keys
  10.  
  11.     this.init = function(options) {
  12.         // init jQuery objects linked to HTML elements
  13.         this.$form              = $('#'+options.formid);
  14.         this.$selectable        = $('#'+options.id+'_selectable');
  15.         this.$selected          = $('#'+options.id+'_selected');
  16.         this.$buttonSelect      = $('#'+options.id+'_select');
  17.         this.$buttonUnselect    = $('#'+options.id+'_unselect');
  18.         this.customOrder        = false;
  19.  
  20.         // init selectable/selected options
  21.         this.options = options.options; // all the options, to remember order
  22.         if (options.selected) {
  23.             this.selected = options.selected;
  24.         }
  25.         if (options.customOrder) {
  26.             this.customOrder = options.customOrder;
  27.         }
  28.  
  29.         // init listener events of buttons
  30.         var that = this;
  31.         // select
  32.         this.$buttonSelect.click(function(e) {
  33.             e.preventDefault();
  34.             // add the selected items to that.selected
  35.             that.$selectable.find(':selected').each(function() {
  36.                 that.selected[that.selected.length] = $(this).val();
  37.             });
  38.             // redraw
  39.             that.update();
  40.         });
  41.  
  42.         // unselect
  43.         this.$buttonUnselect.click(function(e) {
  44.             e.preventDefault();
  45.             // rebuild that.selected, clearing the selected items
  46.             that.selected = []; // reset
  47.             that.$selected.children().each(function() {
  48.                 if (!$(this).is(':selected')) {
  49.                     that.selected[that.selected.length] = $(this).val();
  50.                 }
  51.             });
  52.             // redraw
  53.             that.update();
  54.         });
  55.  
  56.         // when submitting the form, select all the selected items, otherwise nothing will be sent
  57.         this.$form.submit(function() {
  58.             that.$selected.find('option').each(function() {
  59.                 $(this).attr('selected', 'selected');
  60.             });
  61.         });
  62.  
  63.         // finally fill select boxes
  64.         this.update();
  65.     }
  66.  
  67.     // fill selects with (de)selected options
  68.     this.update = function() {
  69.         // first clear all
  70.         this.$selectable.html('');
  71.         this.$selected.html('');
  72.  
  73.         // traverse options
  74.         if (this.customOrder) {
  75.             // maintain order of the order in which items were selected
  76.             // build selectable list
  77.             for (var k in this.options) {
  78.                 if (this.selected.indexOf(k) == -1) {
  79.                     // item was not selected, print it in selectable list
  80.                     this.$selectable.append('<option value="'+k+'">'+this.options[k]+'</option>');
  81.                 }
  82.             }
  83.             // build selected list
  84.             for (var k in this.selected) {
  85.                 var v = this.selected[k];
  86.                 this.$selected.append('<option value="'+v+'">'+this.options[v]+'</option>');
  87.             }
  88.         } else {
  89.             for (var k in this.options) {
  90.                 // use k in arr for key check, use arr.indexOf(k) > -1 for value check
  91.                 if (this.selected.indexOf(k) > -1) {
  92.                     this.$selected.append('<option value="'+k+'">'+this.options[k]+'</option>');
  93.                 } else {
  94.                     this.$selectable.append('<option value="'+k+'">'+this.options[k]+'</option>');
  95.                 }
  96.             }
  97.         }
  98.     }
  99. }


Aanroepen met:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. ...
  2. <script type="text/javascript">
  3. //<![CDATA[
  4.     $().ready(function() {
  5.         var oms2 = new moveselect();
  6.         oms2.init({'id': 'oms2', 'formid': 'theForm', 'options': <?php echo json_encode($options) ?>, 'customOrder': true});
  7.     });
  8. //]]>
  9. </script>
  10. ...
Offline Jorisvh - 12/06/2014 21:50
Avatar van Jorisvh Lid
FangorN schreef:
EDIT:
Aanpassing in de moveselect functie: het is nu mogelijk om opties in een custom volgorde te selecteren die onthouden wordt. Geef hiertoe bij de creatie de parameter 'customOrder': true mee.


Heb dit getest, en dat was inderdaad wat ik nog nodig had! Nu werkt het wel volledig naar mijn wensen!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.221s