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

解决方案：

我使用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 %>', '<%= 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);
    });
});

动态菜单选择Rails不起作用

1 个答案: