動態菜單選擇導軌不工作

Question

我想建立一個鏈式選擇菜單。這是我用的教程：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), :id, :c2, :prompt => "Seleziona sottocategoria" %> 
     </p> 

路線：

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

鏈式選擇菜單不運行，「過濾器」不起作用，並且也是

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

不起作用。

Answer 1

SOLUTION：

我已經改變了使用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); 
    }); 

}); 

溶液和三個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); 
    }); 
});