jquery - onclick 单选按钮应填充下拉菜单

Question

我的高级搜索表单有以下代码。当我针对客户选择单选按钮时，下拉值应填充客户数据。

<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 选择的值传输到控制器？

score 0 · Accepted Answer

您的单选按钮必须具有相同的名称属性。最简单的方法是：
```
<%= radio_button_tag :user_type, params[:customer] %><p>Customer</p>
<%= radio_button_tag :user_type, params[:supplier] %><p>Supplier</p>
```
我猜您可能在用户模型上有客户和供应商布尔属性？如果这是真的，这意味着您必须将其更改为包含此信息的 user_type 字段（或类似的字段）。如果您不能同时成为供应商和客户，这是一个更好的解决方案。

如果我理解你是正确的，你可以这样做：

# 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;
}

jquery - onclick 单选按钮应填充下拉菜单

1 回答 1

Related

Reference