2016-08-16 78 views
0

JSJquery的顯示字段名

我有包含具有各種領域下拉的形式。我想顯示從下拉列表中選擇的字段,其餘字段應該隱藏。

$(document).on('ready page:load', function() { 
var selectedValues = []; 

    $('#customer_detail_field_list').on('change', function (e) { 
     e.preventDefault(); 

     // Get the column API object 
     var checked = $(this).val(); 
     console.log(checked) 
     var currentSelectedArray = [] 
     if (checked) { 
      var selectedOption = []; 
      var selectedIncrement = 0; 
      jQuery.grep(checked, function(el) { 

       if (jQuery.inArray(el, selectedValues) == -1) selectedOption.push(el); 


       selectedIncrement++; 

      }); 
      console.log(selectedOption) 
      var unselectedOption = []; 
      var unselectedIncrement = 0; 
      jQuery.grep(selectedValues, function(el) { 

       if (jQuery.inArray(el, checked) == -1) unselectedOption.push(el); 


       unselectedIncrement++; 

      }); 
      console.log(unselectedOption) 
      // console.log($(this).val()); 
      // console.log(table.column); 
      // console.log(checked) 
      var column = table.column(checked - 1); 
      // console.log(column) 


      // Toggle the visibility 
      column.visible(! column.visible()); 
      selectedValues = checked.slice(); 

     } 
     if (selectedOption == true) 

    }); 

視圖

.col-sm-12 
    .main-login.main-center-customer 
    = 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: "select-fields", "data-live-search": "true", multiple: 'multiple'} 

    %table.display{:id => "example", :cellspacing => "0", :width => "100%"} 
     %thead 
     %tr 
      %th.sorting{"aria-controls" => "example", "aria-label" => "Name: activate to sort column ascending", :colspan => "1", :rowspan => "1", :style => "width: 50px;", :tabindex => "0"} Customer Name 
      %th.sorting_desc{"aria-controls" => "example", "aria-label" => "Position: activate to sort column ascending", "aria-sort" => "descending", :colspan => "1", :rowspan => "1", :style => "width: 50px;", :tabindex => "0"} Customer ID 
      %th{:style => "width: 20px;"} Address 
      %th{:style => "width: 20px;"} State 
      %th{:style => "width: 20px;"} Email 
      %th{:style => "width: 20px;"} Website 
      %th{:style => "width: 50px;"} Service Tax Reg No 
      %th{:style => "width: 50px;"} Local Sales Tax No 
      %th{:style => "width: 50px;"} Residential Type 
      %th{:style => "width: 50px;"} Attention To 
      %th{:style => "width: 50px;"} City 
      %th{:style => "width: 50px;"} Pin code 
      %th{:style => "width: 50px;"} Contact No 
      %th{:style => "width: 50px;"} Business Type 
      %th{:style => "width: 50px;"} PAN No 
      %th{:style => "width: 50px;"} Central sales Tax No 
      %th{:style => "width: 50px;"} Business Center 
      %th{:style => "width: 50px;"} Opening Bal 
      %th{:style => "width: 50px;"} Currency Type 
     /%th{:style => "width: 50px;"} Name 
     /%th{:style => "width: 50px;"} Contact No 
     /%th{:style => "width: 50px;"} Address 
     /%th{:style => "width: 50px;"} State 
     /%th{:style => "width: 50px;"} Pin Code 
     /%th{:style => "width: 50px;"} Delivery Address 


     %tbody 
     - @customer_details.each do |customer| 
      %tr 
      %td= customer.customer_name 
      %td= customer.customer_id 
      %td= customer.address 
      %td= customer.state 
      %td= customer.email 
      %td= customer.website 
      %td= customer.service_tax_reg_no 
      %td= customer.local_sales_tax_reg_no 
      %td= customer.residential_type 
      %td= customer.attention_to 
      %td= customer.city 
      %td= customer.pin_code 
      %td= customer.contact_no 
      %td= customer.business_type 
      %td= customer.pan_no 
      %td= customer.central_sales_tax_no 
      %td= customer.business_center 
      %td= customer.opening_bal 
      %td= customer.currency_type 

問題是我不知道如何給條件的字段是displayed.I只想顯示selectedOption從array.can幫助我的人。提前致謝!!。

+0

請出示正確使用段編輯器,例如一個自包含的例子添加相關的html – mplungjan

+0

我只添加了相關的視圖文件。這裏我添加了包含下拉列表的視圖文件。使用Jquery我必須只顯示選定的字段。 – Hari

+0

但是,這並沒有給我們任何HTML看看。在代碼片段中顯示呈現的HTML,以便代碼可以被操縱。我不想看到這個觀點。 – mplungjan

回答

0

這就是我如何在下拉列表中選擇一個值(#my_dropdown_id)。如果您有多個選擇,您可能必須適應。

# jquery function to show conditional fields - attach this to onchange event of drop down 
function showConditionalFields() { 
    $(".conditional").hide() 
    selected_condition = $('#my_dropdown_id :selected').text() 
    $(".conditional.".concat(selected_condition)).show() 
}; 

然後加上各地要顯示的字段.conditional.valuex /隱藏

.conditional.value1 
    # tags when value1 is selected 
.conditional.value2 
    # tags when value2 is selected