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

Question

如果我有发货，每个发货都有四种可能的模式之一。当我想要创建一张发票时，我转到新发票，从选择菜单中选择装运(发票用于什么装运)。如果所选货件具有模式A，则表单中将显示某些字段；如果所选货件具有模式B，则将显示其他一些字段。

我所需要的就是在新发票表单中，当有人选择一个货件时，立即找到货件的模式(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回调。它向服务(控制器操作)发送一个请求，该服务返回给定发货的模式。您使用这种模式，并且只显示那些data-shipment-mode具有相同值的div。

您甚至可以对其进行扩展，当您隐藏一个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();
    });
});