Question

I’ve created some hidden drop-down fields that I’m attempting to keep hidden until appropriately selected.

I’m trying to do this with mootools – I’ve put in ‘alerts’ so that I can see the variables getting passed along at each step.

The first hidden dropdown shows appropriately and the value displays accordingly, but when a value is selected from the 2nd dropdown the value is ‘undefined’ and the 3rd dropdown does not display.

I’ve been looking it over time and time again but cannot figure out why this won’t work. Any advice would be greatly appreciated. I’m new to mootools & Javascript so it may be a simple fix I’m just not seeing.

You can view the JSFiddle for this – it contains all the html/javascript.

Answer 1

This works. Instead of relying on this, I changed it to use the passed Event object, then got the target from that.

window.addEvent('domready', function() {
    $('numberStyle').addEvent('change', function() {
        var targ = $(this.get('value'));
        $$('.sub-1').setStyle('display', 'none');
        targ.setStyle('display', 'block');
        alert('TargID = ' + targ.id);

        targ.addEvent('change', function(evt) {
            var targID1 = $(evt.target).get('value');
            alert('The value is of sub-1 is ' + targID1);
            $$('.sub-2').setStyle('display', 'none');
            $(targID1).setStyle('display', 'block');
          });

    });
});