Question

I’m trying to make a “double” drop down with Joomla ChronoForms but I’m having a Javascript error on the page when I select something from the first dropdown, here is my code:

<select id="recipe" name="recipe">
    <optgroup label="test" id="ch_1">
        <option value="blabla">something here</option>
        <option value="blabla">something here</option>
    </optgroup>

    <optgroup label="test244" id="ch_2">
        <option value="blabla">something here</option>
        <option value="blabla">something here</option>
    </optgroup>

    <optgroup label="testtt" id="ch_3">
        <option value="blabla">something here</option>
        <option value="blabla">something here</option>
    </optgroup>

    <optgroup label="testt23521" id="ch_4">
        <option value="blabla">something here</option>
        <option value="blabla">something here</option>
    </optgroup>

    <optgroup label="teeesstt" id="ch_5">
        <option value="blabla">something here</option>
        <option value="blabla">something here</option>
    </optgroup>
</select>

and the JS code is:

window.addEvent('load', function() {
    var num_groups = 5;
    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]);
    });
});

And the JS error that I receive is: TypeError: Cannot call method ‘each’ of null

Could you PLEASE help me with this?
Thank you

Here is the thread in the forum related to this link or link2 , maybe it can help someone find the issue, I’ve tried everything I can .. 🙁 please someone

Answer 1

okay, if it is joomla most likely it is MooTools, not sure what version though, try to change selector

$(‘#recipe optgroup’).each(function(el) {el.remove()});

to

$$(‘#recipe optgroup’).each(function(el) {el.remove()});