Rails 3和Formtastic.如何根据选择显示字段(ajax)

Question

如果我有货物，每批货物有四种可能的模式之一。当我想要创建发票时，我转到New invoice，从选择菜单中选择装运(发票的装运对象)。如果选择的货物有模式A，那么表单中将显示一些字段;如果选择的货物有模式B，那么将显示一些其他字段。

我所需要的只是在New Invoice表单中，当有人选择了货物时，要快速查找货物的模式(shipment.mode)。

Answer 1

你可以用类似的方式实现它:

你的观点:

<div data-shipment-mode="A" style="display:none;">
    fields that should only be shown for shipment mode A
</div>
<div data-shipment-mode="B" style="display:none;">
    fields that should only be shown for shipment mode B
</div>

你的JavaScript:

$(document).ready(function() {
    $('id-of-shipment-select-menu').change(function() {
        var successHandler = function(data) {
            var mode = data.mode;
            $("div[data-shipment-mode!=" + mode + "]").hide();
            $("div[data-shipment-mode=" + mode + "]").show();
        };
        var shipmentId = $(this).val();
        /* replace service_url with the appropriate controller/action */
        $.getJSON("/service_url/" + shipmentId, successHandler);
    });
});

最初所有依赖于模式的字段都是隐藏的。然后，当您选择货物时，将调用change回调。它向服务(控制器动作)发送请求，该服务返回给定货物的模式。使用这种模式，只显示那些div的data-shipment-mode具有相同的值。

你甚至可以展开它，当你隐藏一个div时，你可以清除其中所有输入(和选择等)的值，也可以禁用它们。

您可以避免将请求发送到服务器，如果您在每个发货的选项标签中嵌入模式:

视图:

<option id="A_SHIPMENT_ID" 
        data-shipment-mode="SHIPMENT_MODE_FOR_THIS_SHIPMENT">
        Shipment A
</option>

JavaScript:

$(document).ready(function() {
    $('id-of-shipment-select-menu').change(function(e) {
        var mode = $(e.target).data("shipment-mode");
        $("div[data-shipment-mode!=" + mode + "]").hide();
        $("div[data-shipment-mode=" + mode + "]").show();
    });
});