2016-08-04 11 views
0

jQueryのドロップダウンリストのセットIDを自動的

index.html.haml私はいくつかのフィールドを持つドロップダウンリストを持つフォームを持っています。私は顧客がフォームに表示されなければならないフィールドを選択したい。残りのフィールドはフォームから隠す必要があります。

.col-xs-12.table-responsive 
 
    = form_for(@customer_detail) do |f| 
 
.field-list 
 
    = f.label :field_list,"Choose the fields to be displayed", class: "col-sm-3 control-label text-right" 
 
    = f.select :field_list, options_for_select(CustomerDetail::INSERT_FIELD_LIST_CUSTOMER),{}, {prompt: "Field List", class: "checkbox_list_for_tax_org form-control form-width", "data-live-search": "true", multiple:"multiple"} 
 

 
%table.table.table-striped 
 
    %thead 
 
    %tr 
 
     - hash_value.each do |f| 
 
     %th{id:"#{f[0]}"} Customer Name 
 
     %th{id:"#{f[0]}"} Customer ID 
 
     %th{id:"#{f[0]}"} Address 
 
     %th{id:"#{f[0]}"} State 
 
     %th{id:"#{f[0]}"} Email 
 
     %th{id:"#{f[0]}"} Website 
 
     %th{id:"#{f[0]}"} Service Tax No 
 
     %th{id:"#{f[0]}"} Local Sales Tax No 
 
     %th{id:"#{f[0]}"} Residential Type 
 
     %th{id:"#{f[0]}"} Attention To 
 
     %th{id:"#{f[0]}"} City 
 
     %th{id:"#{f[0]}"} Pin Code 
 
     %th{id:"#{f[0]}"} Contact No 
 
     %th{id:"#{f[0]}"} Business Type 
 
     %th{id:"#{f[0]}"} PAN No 
 
     %th{id:"#{f[0]}"} Central Sales Tax No 
 
     %th{id:"#{f[0]}"} Business Center 
 
     %th{id:"#{f[0]}"} Opening Bal 
 
     %th{id:"#{f[0]}"} Currency Type 
 
     %th{id:"#{f[0]}"} Name 
 
     %th.closed Address 
 
     %th.closed State 
 
     %th.closed Contact No 
 
     %th.closed Pin Code 
 
     %th.closed Delivery Address 
 

 
    %tbody 
 
    - @customer_details.each do |customer| 
 
     %tr 
 
     - hash_value.each do |f| 
 
      %td{id:"#{f[0]}"}= customer.customer_name 
 
      %td{id:"#{f[0]}"}= customer.customer_id 
 
      %td{id:"#{f[0]}"}= customer.address 
 
      %td{id:"#{f[0]}"}= customer.state 
 
      %td{id:"#{f[0]}"}= customer.email 
 
      %td{id:"#{f[0]}"}= customer.website 
 
      %td{id:"#{f[0]}"}= customer.service_tax_reg_no 
 
      %td{id:"#{f[0]}"}= customer.local_sales_tax_reg_no 
 
      %td{id:"#{f[0]}"}= customer.residential_type 
 
      %td{id:"#{f[0]}"}= customer.attention_to 
 
      %td{id:"#{f[0]}"}= customer.city 
 
      %td{id:"#{f[0]}"}= customer.pin_code 
 
      %td{id:"#{f[0]}"}= customer.contact_no 
 
      %td{id:"#{f[0]}"}= customer.business_type 
 
      %td{id:"#{f[0]}"}= customer.pan_no 
 
      %td{id:"#{f[0]}"}= customer.central_sales_tax_no 
 
      %td{id:"#{f[0]}"}= customer.business_center 
 
      %td{id:"#{f[0]}"}= customer.opening_bal 
 
      - if customer.goods_address.present? 
 
      %td.closed= customer.goods_address.name 
 
      %td.closed= customer.goods_address.contact_no 
 
      %td.closed= customer.goods_address.address 
 
      %td.closed= customer.goods_address.state 
 
      %td.closed= customer.goods_address.pin_code 
 
      %td.closed= customer.goods_address.delivery_address

$(function() { 
 
$(".field-list").change(function(){ 
 
    var checked = $(this).find("option:checked").val(); 
 
    alert(checked); 
 
    ($(this).val()).show(); 
 

 
}); 
 

 
});
問題は、私は、各フィールドのIDを設定する方法を知らないです。私はドロップダウンで選択されているフィールドのみを表示する必要があります。誰かが私を助けplz。前もって感謝します!!

+0

javascriptを使用してエレメントが選択されたときに、 'input'フィールド属性を作成することをお勧めします。フィールドを隠して表示するのではなく、「javascript/jqueryを使用してフォームフィールドを作成する」を検索してみてください。 – Abhinay

答えて

0
var checked = $(this).val(); 
console.log(checked) 
var currentSelectedArray = [] 
if (checked) { 
var selectedOption = []; 
var slectedIncrement = 0; 
jQuery.grep(checked, function(el) { 
    if (jQuery.inArray(el, selectedValues) == -1)     
    selectedOption.push(el); 
    slectedIncrement++; 

});

関連する問題