HAMLのElseが "select"ボックスの値を確認する場合

Question

= form_tag questions_path, :method=>:post do 
    = label :question, :type, 'Type: ' 
    = select :question, :type, %w(Text Picture Audio Video), :id=> :question_type_combo 
     **- if :question_type_combo.selected != 'Text'** 
     = label :question,:url, 'URL: ' 
     = text_field :question,:url, :id=> :question_url_text 
     = submit_tag 'Add Question',:id=>:add_question_button 

HAMLではこのようなことがありますか？上記のSELECT BOXで選択した場合、特定のオプションのテキストフィールドのみをレンダリングしたいと思います。

Answer 1

はい、いいえ。

= form_for @question do |f| 
    = f.label :type 
    = f.select, :type, %w(Text Picture Audio Video), id: 'question_type_combo' 
    - unless f.object.question_type_combo === 'Text' 
     = f.label :url 
     = text_field :url, id: 'question_url_text' 

しかし、ユーザーがフォームを送信すると、非常に有用ではないの後にこれが唯一の可視性を変更します：あなたは、フォームにバインドするレコードの値に基づく条件を書くことができます。

代わりに、jQueryを使用して'change 'イベントのイベントハンドラを作成できます。

$(document).on('change','#question_type_combo', function(){ 
 
    var type = $(this).first(':selected').val(); 
 
    var $other_input = $('#other_input'); 
 
    if (type == 'Text') { 
 
    $other_input.hide(); 
 
    } else { 
 
    $other_input.show(); 
 
    } 
 
}); 
 

 
// sets the initial state 
 
// if you are using turbolinks 
 
$(document).on('page:load', function(){ 
 
    $('#question_type_combo').trigger('change'); 
 
}); 
 

 
// if you are not using turbolinks 
 
$(function(){ 
 
    $('#question_type_combo').trigger('change'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="field"> 
 
    <label>Type</label> 
 
    <select name="question[question_type_combo]" id="question_type_combo"> 
 
     <option>Text</option> 
 
     <option>Something else</option> 
 
    </select> 
 
    </div> 
 
    <div class="field" id="other_input"> 
 
    <label>URL</label> 
 
    <input type="text" name="question[url]"> 
 
    </div> 
 
</form>

Answer 2

- if：question_type_combo.selected！= 'Text'これはhamlビューでは不可能です。選択したオプションに基づいて何かを実行するには、jsを使用する必要があります。

それとも、あなたはコントローラオブジェクトがある場合は同様のコードを使用してselectedオプションを設定することがあります。

= select_tag("fee_discount", options_for_select(Fee.discounts.keys.map {|k| [k.titleize, k]}, selected: "#{"rewards" if @vendor.present? && @vendor.approved?}"), include_blank: true) 

それとも

をあなたがhideクラスでdivの内側のラベルとtext_fieldを維持することがあります。 そしてjavascriptを使用すると、divの表示を非表示にすることができます。