如何重新编写此代码以在rails上的ruby中工作

时间:2016-09-19 01:02:47

标签: javascript ruby-on-rails

我需要重新编写下面的代码才能使用rails格式。我读了googled,但没有成功。

<select id="ddlSelect">
      <option>Jobs</option>
      <option>Products</option>
      <option>Other</option>
    </select>
<input type="text" id="hdnPro" value="product" style='display:none'/>


$('#ddlSelect').on('change',function(){
   if($(this).val() == 'Products'){
        $('#hdnPro').show();
      }else{
        $('#hdnPro').hide();
      }
});

我需要将上面的代码转换为在rails框架内工作。

在视图中我尝试了这种方式,/ app / vies / gastos / _ form.html.erb:

 <div align="center">
  <%= form_for(@gasto) do |f| %>


    <div class="form-group">
      <div class="field" id="ddlSelect">
        <%= f.label "Tipo de Pagamento" %><br>
        <%= f.select_tag(:payment_type, options_for_select([['À vista', 1], ['À prazo', 2], ['Misto', 3]]), { include_blank: true } ) %>   

      </div>

      <div class="field" id="hdnPro" style='display:none'>
        <%= render 'payment_flows/form' %>
      </div> 


    </div>
  <% end %>
</div>

这样的javascript文件,位置/ app / assets / javascript:

$('#ddlSelect').change(function(){
  $ajax({
    $('#ddlSelect').('change',function(){
        if($(this).val() == 'À prazo'){
            $('#hdnPro').show();
        }else{
            $('#hdnPro').hide();

    })
  })
});

抱歉我的英语不好。

My Repository

2 个答案:

答案 0 :(得分:0)

$('#ddlSelect').on('change',function(){
   if($(this).val() == '2'){
        $('#hdnPro').show();
   }else{
        $('#hdnPro').hide();
   }
});

尝试使用此JavaScript。

答案 1 :(得分:0)

这是我的解决方案:

  <div class="field" id="ddlSelect">
    <%= f.label "Tipo de Pagamento" %><br>
    <%= f.select_tag(:payment_type, options_for_select([['À vista', 1], ['À prazo', 'À prazo'], ['Misto', 3]]), include_blank: true, :onchange => 'teste()') %> 

  <div class="field" id="hdnPro" style='display:none'>
    <%= render 'payment_flows/form' %>
  </div> 

    <script >
      $('#payment_type').on('change',function(){
         if($(this).val() == 'À prazo'){
              $('#hdnPro').show();
         }else{
              $('#hdnPro').hide();
         }
      });
    </script>  


  </div>