從下拉列表中快速創建表格字段

我知道如何在Google中搜索我的問題情景。從下拉列表中快速創建表格字段

問題：當用戶從下拉列表中選擇時，下面的表格字段應該相應地改變。

示例：如果用戶從下拉選擇「人」，然後在下方form_fields應該顯示像「年齡」字段，「種族」字段等。

如果用戶從下拉選擇「事件」在下面的表格欄中應該顯示「日期」，「地點」等。

和默認情況下，我們將有「提交」按鈕。

任何人都可以告訴如何做到這一點？任何有關simple_form ruby gem的幫助也會有所幫助。

來源

2014-03-04 userRandom

這是很容易實現與simple_form寶石和一些簡單的JavaScript。

查看

<%= simple_form_for @object do |f| %> 
    <%= f.input :attribute_name, :collection => ['Human', 'Event'], :input_html => { :class => 'dropdown' %> 

    <div class="toggle human" style="display:none;"> 
    <%= f.input :age %> 
    </div> 

    <div class="toggle event" style="display:none;"> 
    <%= f.input :date %> 
    </div> 

    <%= f.button :submit %> 

<% end %>

這裏的關鍵是包裝要在div切換與特定選擇的領域。

然後我們在下拉字段中查找更改事件，並相應地切換我們的div。

的Javascript

$('.dropdown').change(function() { 
    // hide divs first 
    $('form .toggle').hide(); 

    // get value from dropdown 
    var divClass = $('.dropdown').val().toLowerCase(); 

    // show necessary div 
    $('.' + divClass).show(); 
});

使用這種方法，你不需要寫的下拉列表中的每個值的具體情況，但可以使用下拉列表的小寫值作爲選擇的div。

Here是一個帶有靜態標記的簡單示例。

來源

2014-03-04 18:54:58 seancdavis

你能告訴我在哪裏把JavaScript保存在rails中以利用活力？由於我是一個新手入門，我不知道在哪裏把JavaScript，使我的看法可以使用它。只是爲了讓你知道我正在使用咖啡腳本和jQuery的軌道.. – userRandom

我試着將你的javascript代碼粘貼在assets/javascripts /中，並試圖從視圖中使用「javascript_include_tag」助手..但無法得到它 – userRandom

你'重新走上正軌。要在關閉「」之前將javascript添加到rails，您需要'javascript_include_tag'。指向'app/assets/javascripts/application.js'。然後在'app/assets/javascripts/application.js'中可以包含jquery和其他js文件。我建議仔細閱讀[本頁]（http://railsapps.github.io/rails-javascript-include-external.html）以獲得更詳細的解釋。 – seancdavis

你可以用一些簡單的JavaScript來做到這一點。比方說，你有以下字段的形式

<%= f.select :some_field, %w[Human Cat], {}, {:class => 'my-select'} %> 

<div class="human"> 
    <%= f.label :age %><br> 
    <%= f.text_field :age %> 
</div> 

<div class="cat" style="display:none;"> 
    <%= f.label :sub_species %><br> 
    <%= f.text_field :sub_species %> 
</div>

現在添加一些JavaScript，使其動態

<script> 
    $(".my-select").change(function(){ 
if($(".my-select").val() == "Human"){ 
    $(".human").css('display', 'block'); 
    $(".cat").css('display', 'none'); 
}else{ 
    $(".human").css('display','none'); 
    $(".cat").css('display', 'block'); 
} 
    }) 
</script>

來源

2014-03-04 18:37:01 Monideep

從下拉列表中快速創建表格字段

回答

相關問題