0

事前検索フォームに次のコードがあります。顧客に対してラジオ ボタンを選択すると、ドロップダウン値に顧客データが入力されます。

<div class="container">
 <%= form_tag search_index_path, method: :get do %>
<%= radio_button_tag :customer, params[:customer] %><p>Customer</p>
<%= radio_button_tag :supplier, params[:supplier] %><p>Supplier</p>
 <% end %>
<%= collection_select(:customer, :customer_number, Customer.all, :id, :state) %>
<%= collection_select(:customer, :customer_number, Customer.all, :id, :city) %>
<%= collection_select(:customer, :customer_number, Customer.all, :id, :name) %>
</div>
<%= submit_tag "Search", name: nil %>

現在、2 つの問題に直面しています - 1. 両方のラジオ ボタンを同時に選択できます。他を選択すると、選択を解除する必要があります。それを処理する方法。2.ラジオボタンをクリックすると、ドロップダウン値が画面に表示されます。

これらの両方を処理するにはどうすればよいですか？また、誰かが学ぶためのjqueryとajaxの良いソースを提案できる場合.

ありがとうムグダ

私はこのようにコードを変更しました

<div class="container">
    <%= form_tag search_index_path, method: :get do %>
        <%= radio_button_tag 'user_type', 'customer' %><p>Customer</p>
        <%= radio_button_tag 'user_type', 'supplier' %><p>Supplier</p>
    <% end %>
        <h2>Search Criteria</h2>
    <div id="dropdown">
        <p>State</p>
        <%= collection_select(:customer, :customer_number, Customer.all, :id, :state) %>
        <p>City</p>
        <%= collection_select(:customer, :customer_number, Customer.all, :id, :city) %>
        <p>Name</p>
        <%= collection_select(:customer, :customer_number, Customer.all, :id, :name) %>
    </div>
    <div id="dropdown1">
        <p>State</p>
        <%= collection_select(:supplier, :supplier_number, Supplier.all, :id, :state) %>
        <p>City</p>
        <%= collection_select(:supplier, :supplier_number, Supplier.all, :id, :city) %>
        <p>Name</p>
        <%= collection_select(:supplier, :supplier_number, Supplier.all, :id, :name) %>
    </div>
</div>

<%= submit_tag "Search", name: nil %>
<script>
    $(document).ready(function() {
            $("#dropdown").hide();
            $("#dropdown1").hide();
        $("input[type='radio'][name='user_type'][value='customer']").click(function(){
          $("#dropdown1").hide(); 
          $("#dropdown").show();
        $("input[type='radio'][name='user_type'][value='supplier']").click(function(){
            $("#dropdown").hide();
          $("#dropdown1").show();  

          }); 
        });
    });
</script>

ここで、検索条件に一致するモデルから値を見つけることができるように、ドロップダウンと選択したラジオ ボタンの選択した値をコントローラーに渡す必要があります。私の質問は、jquery で選択した値をコントローラーに転送する方法です。

4

1 に答える 1

0

  1. ラジオ ボタンには同じ name 属性が必要です。これを行う最も簡単な方法は次のとおりです。

    <%= radio_button_tag :user_type, params[:customer] %><p>Customer</p>
<%= radio_button_tag :user_type, params[:supplier] %><p>Supplier</p>

    おそらくユーザーモデルに顧客とサプライヤーのブール属性があると思いますか？これが正しい場合、これは、この情報を含む user_type フィールド (または類似のもの) に変更する必要があることを意味します。これは、同時にサプライヤーと顧客になることができない場合に適したソリューションです。

  2. あなたが正しいことを理解していれば、次のようなことができます：

    # In view (could fx. be: app/views/shared/_search_form.html.erb)
<div class="container">
  <%= form_tag search_index_path, method: :get do %>
    <%= radio_button_tag :customer, params[:customer], :data => {:target => "state_select"} %><p>Customer</p>
    <%= radio_button_tag :supplier, params[:supplier], :data => {:target => ".supplier_selection"} %><p>Supplier</p>
  <% end %>
  <div class="selection customer_selection">
    <%= collection_select(:customer, :customer_number, Customer.all, :id, :state, {}, {:class => "state_select"}) %>
    <%= collection_select(:customer, :customer_number, Customer.all, :id, :city, {}, {:class => "city_select"}) %>
  </div>
  <div class="selection supplier_selection">
   <%= collection_select(:customer, :customer_number, Customer.all, :id, :name, {}, {:class => "name_select"}) %>
  </div>
</div>
<%= submit_tag "Search", name: nil %>

# In javascript (could fx. be: app/asssets/javascript/shared/search_form.js)
$(document).ready(function() { 
  $(document).on('change', 'input[type=radio]', function(){ 
    $(".selection").hide();
    var target_selector = $(this).data('target');
    $(target_selector).show();
  }); 
}); 

# In css
.selection{
  display: none;
}
于 2013-05-15T14:47:32.137 に答える