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)

或者

您可以将标签和text_field保留在hide类的div中。然后使用javascript你可以隐藏取消隐藏div。

如果在HAML中有其他方法来检查＆＃34;选择＆＃34;框

2 个答案: