Dynamic menu select Rails don't work

I'm trying to build a chained select menu. This is the tutorial I used: http://railscasts.com/episodes/88-dynamic-select-menus Something goes wrong, I don't know what I'm missing.

javascript

var sottocategorie = new Array();
<% for element in @sottocategorie -%>
    sottocategorie.push(new Array(<%= element.idcategoria %>, <%= element.c2 %>));
<% end -%>

function selezionacategoria() {

    categoriaid = $('segnalazione_categoria1').getValue();
    options = $('segnalazione_categoria2').options;

    options.length = 1;
    sottocategorie.each(function(elementement) {
        if (element[0] == categoriaid) {

            options[options.length] = new Option(element[1]);
        }
    });
   开发者_运维知识库 if (option.length == 1) {
        $('sottocategoria_field').hide();
    } else {
        $('sottocategoria_field').show();
    }
}

document.observe('dom:loaded', function() {
    //selezionacategoria();
    $('segnalazione_categoria1').observe('change', selezionacategoria);
});

html

<label for="segnalazione_categoria1">Categoria:</label>
          <%= f.collection_select :categoria1, Categorium.find(:all), :id, :c1, :prompt => "Seleziona categoria" %>

        <p id="sottocategoria_field">
            <label for="segnalazione_categoria2">Categoria:</label>
          <%= f.collection_select :categoria2, Sottocategoria1.find(:all), :id, :c2, :prompt => "Seleziona sottocategoria" %>
        </p> 

routes:

  match '/:controller(/:action(/:id))'

The chained select menu doesn't run, the "filter" doesn't work, and also

if (option.length == 1) {
            $('sottocategoria_field').hide();
        } else {
            $('sottocategoria_field').show();
        }

doesn't work.

SOLUTION:

I've changed the javascript file using jQuery:

var sottocategorie = new Array();
<% for sottocategoria in @sottocategorie %>
    sottocategorie.push(new Array('<%= sottocategoria.idcategoria %>', '<%= escape_javascript(sottocategoria.c2) %>', <%= sottocategoria.id %>));
<% end %>

function menuSelected(orig_menu, new_menu, item_array) {
    orig_value = $('#segnalazione_categoria1 :selected').text();

    //alert(orig_value);
    $(new_menu).empty();
    jQuery.each(item_array, function(i, val) {
        if (val[0] == orig_value) {
            $(new_menu).append($("<option></option>").attr("value",val[2]).text(val[1]));
        }
    });
}

$(document).ready(function(){

//bind the click event to the city submit button
    $('#submit_button').bind('click', function () {

        menuSelected('#segnalazione_categoria1', '#segnalazione_categoria2', sottocategorie);
    });

});

SOLUTION WITH THREE LEVELS OF CHAINING:

var sottocategorie = new Array();
var subsottocategorie = new Array();
<% for sottocategoria in @sottocategorie %>
    sottocategorie.push(new Array('<%= sottocategoria.idcategoria %>', '<%= escape_javascript(sottocategoria.c2) %>', <%= sottocategoria.id %>));
<% end %>
<% for subsottocategoria in @subsottocategorie %>
    subsottocategorie.push(new Array('<%= subsottocategoria.idsottocategoria1s %>', '<%= escape_javascript(subsottocategoria.c3) %>', <%= subsottocategoria.id %>));
<% end %>

function menuSelected(orig_menu, new_menu, item_array) {
    orig_value = $(''+ orig_menu + ' :selected').text();
    //alert(orig_value);
    $(new_menu).empty();
    jQuery.each(item_array, function(i, val) {
        if (val[0] == orig_value) {
            $(new_menu).append($("<option></option>").attr("value",val[1]).text(val[1]));
        }
    });
}

$(document).ready(function(){
 $(".nascosto").hide();
 $(".nascosto1").hide();
//bind the click event to the city submit button
    $('#segnalazione_categoria1').bind('click', function () {
        $(".nascosto").show();
        $('#segnalazione_categoria3').empty();
        menuSelected('#segnalazione_categoria1', '#segnalazione_categoria2', sottocategorie);
    });
    $('#segnalazione_categoria2').bind('click', function (event) {
        $(".nascosto1").show();
        menuSelected('#segnalazione_categoria2', '#segnalazione_categoria3', subsottocategorie);
    });
});