动态菜单选择Rails不起作用

问题描述

| 我正在尝试构建一个链接的选择菜单。这是我使用的教程：http://railscasts.com/episodes/88-dynamic-select-menus 出问题了，我不知道我在想什么。 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),:c2,:prompt => \"Seleziona sottocategoria\" %>
        </p> 

路线：

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

链接的选择菜单无法运行，\“过滤器\”不起作用，并且

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

不起作用。     

解决方法

        解： 我已经使用jQuery更改了JavaScript文件：

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);
    });

});

具有三个层次的解决方案：

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

function menuSelected(orig_menu,item_array) {
    orig_value = $(\'\'+ orig_menu + \' :selected\').text();
    //alert(orig_value);
    $(new_menu).empty();
    jQuery.each(item_array,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\',sottocategorie);
    });
    $(\'#segnalazione_categoria2\').bind(\'click\',function (event) {
        $(\".nascosto1\").show();
        menuSelected(\'#segnalazione_categoria2\',\'#segnalazione_categoria3\',subsottocategorie);
    });
});