b2evolution PHP Cross Reference Blogging Systems

Source: /rsc/js/dynamic_select.js - 94 lines - 3282 bytes - Summary - Text - Print

Description: Dynamic select list options Example: LIST 1 Values 'a','b','c' LIST 2 Values 'a-1','a-2','b-3','c-2','c-4' ==> After Refresh LIST 2 values '1','2' if SL1 = 'a' -- OR -- '3' if SL1 = 'b'  .......... CloneOptions always Values 'a-1','a-2','b-3','c-2','c-4' This file is part of the evoCore framework - {@link http://evocore.net/} See also {@link http://sourceforge.net/projects/evocms/}.

   1  /**
   2   *    Dynamic select list options
   3   *     Example:
   4   *     LIST 1 Values 'a','b','c'
   5   *    LIST 2 Values 'a-1','a-2','b-3','c-2','c-4'
   6   *    ==> After Refresh LIST 2 values '1','2' if SL1 = 'a' -- OR -- '3' if SL1 = 'b'  ..........
   7   *     CloneOptions always Values 'a-1','a-2','b-3','c-2','c-4'
   8   *
   9   * This file is part of the evoCore framework - {@link http://evocore.net/}
  10   * See also {@link http://sourceforge.net/projects/evocms/}.
  11   * @version $Id: dynamic_select.js 9 2011-10-24 22:32:00Z fplanque $
  12   */
  13  
  14  /**
  15  * Called by window.onload event
  16  * Initialize all parent_child selects lists of the form
  17  */
  18  function init_dynamicSelect()
  19  {
  20      for( var i = 0; i < nb_dynamicSelects ; i++)
  21      {
  22          dynamicSelect( tab_dynamicSelects[i]['parent'], tab_dynamicSelects[i]['child'] );
  23      }
  24  }
  25  
  26  /**
  27   * Initialize select lists
  28   *
  29   * You need to use it to handle parent_child select lists
  30   * This will clone all select options in order to reuse a filtered subset later, depending on the parent selection.
  31   * This will also add the onchange handler on the parent
  32   *
  33   * @param parent select list
  34   * @param child select list
  35   */
  36  function dynamicSelect( id1, id2 )
  37  {
  38      // Feature test to see if there is enough W3C DOM support
  39      if (document.getElementById && document.getElementsByTagName)
  40      {
  41          // Obtain references to both select boxes
  42          var sel1 = document.getElementById(id1);
  43          var sel2 = document.getElementById(id2);
  44          // Clone the dynamic select box
  45          var clone = sel2.cloneNode(true);
  46          // Obtain references to all cloned options
  47          var clonedOptions = clone.getElementsByTagName("option");
  48          // Onload init: call a generic function to display the related options in the dynamic select box
  49          refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
  50          // Onchange of the main select box: call a generic function to display the related options in the dynamic select box
  51          sel1.onchange = function()
  52          {
  53              refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
  54          }
  55      }
  56  }
  57  
  58  
  59  /**
  60   * Refresh the child select list when the parent changes.
  61   *
  62   * @param parent select list
  63   * @param child select list
  64   * @param clone of the child select list initialized
  65   */
  66  function refreshDynamicSelectOptions( sel1, sel2, clonedOptions )
  67  {
  68      // Delete all options of the dynamic select box
  69      while( sel2.options.length )
  70      {
  71          sel2.remove(0);
  72      }
  73      // Regular expression to test if the value of a cloned option begins with the value of the selected option of the main select box
  74      var pattern1 = new RegExp( "^" + sel1.options[sel1.selectedIndex].value + "-.*$" );
  75  
  76      // Regular expression to keep only the second part(X2) of the value "X1-X2"
  77      //var pattern2 = new RegExp( "^.*-(.*)$" );
  78  
  79      // Iterate through all cloned options
  80      for( var i = 0, j = 0; i < clonedOptions.length; i++ )
  81      {
  82          // If the value of a cloned option begins with the value of the selected option of the main select box
  83          if ( clonedOptions[i].value.match( pattern1 ) || clonedOptions[i].value == '' )
  84          {
  85              // Clone the option from the hidden option pool and append it to the dynamic select box
  86              sel2.appendChild( clonedOptions[i].cloneNode( true ) );
  87  
  88              // keep only the second part of value if exist (pattern 2)
  89              //    val = sel2.options[j].value.match( pattern2 );
  90              //if (val) sel2.options[j].value = val[1];
  91              //j++; //indice options in the new list SL2
  92          }
  93      }
  94  }

title

Description

title

Description

title

Description

title

title

Body