Forums

Hi there,

If found this http://greyhead.net/chronoforms/creating-a-double-drop-down about creating a double drop-down box.

But i can't get it to work in CFv4.

I created a test form with "Custom Element". In this custom element i have put this code:

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label"
      style="width: 150px;">Chapter</label>
    <select class="cf_inputbox" id="chapter" size="1"
      title="" name="chapter">
      <option value="">Choose Option</option>
      <option value="1">Chapter 1</option>
      <option value="2">Chapter 2</option>
    </select>
  </div>
  <div class="cfclear"> </div>
</div>
<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label"
      style="width: 150px;">Recipe</label>
    <select class="cf_inputbox" id="recipe" size="1"
      title="" name="recipe">
      <option value="">Choose Option</option>
      <optgroup label="Chapter 1" id="ch_1" >
  <option value="a">Recipe a</option>
  <option value="b">Recipe b</option>
  <option value="c">Recipe c</option>
</optgroup>
<optgroup label="Chapter 2" id="ch_2" >
  <option value="x">Recipe x</option>
  <option value="y">Recipe y</option>
  <option value="z">Recipe z</option>
</optgroup>
    </select>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="submit"
      id="submit" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>

Then i created in EVENT in ON LOAD a LOAD JS EVENT with this code:

window.addEvent('load', function() {
  var num_groups = 2
  var groups = new Array;
  for ( var i = 1; i <= num_groups; i++ ) {
   groups[i] = $('ch_'+i);
   $('ch_'+i).remove();
  }
  $('chapter').value = '';

  $('chapter').addEvent('change', function() {
    var group_no = $('chapter').value;
    if ( !group_no ) {
      return;
    }
   $('#recipe optgroup').each(function(el) {el.remove()});
   $('recipe').appendChild(groups[group_no]);
  });
});

But when i view the form and i select a chapter i still see al the options:
[attachment=0]dubble dropdown.png[/attachment]

What do i wrong??

Regards
Ritchie

Hi Ritchie,

it looks as if the JavaScript is not longer working with MooTools 1.3 :-(

I'll look at it as soon as I can find time.

Bob

Thnx, that would be great!! I'am rather glad that i didn't make a mistake :wink:

Hi Ritchie,

Just an update, Max has added a Dynamic Dropdown action in CFv4 RC3.0 that replaces this code.

Bob