如何在選擇下拉框中的複選框的情況下過濾java腳本中的json數據？

rails 4 + Javascript + jquery如何在選擇下拉框中的複選框的情況下過濾java腳本中的json數據？

我有一個下拉篩選器與多個選擇複選框（自動完成複選框）。我想通過origin_name在javascript上實現客戶端過濾器。

在下拉列表中將出現「ABC，XYZ，PQR ....」等列表。雖然選擇一個origin_name數據應該與特定ID進來一張表...

任何建議如何實現？

JSON數據來這樣

@bus_schedules = [{"id":470,"origin_name":ABC}, 
    {"id":446,"origin_name":XYZ}, 
    {"id":465,"origin_name":PQR}, 
    {"id":442,"origin_name":LUV} 
    ]   
    <script type="text/javascript"> 
    var json_data = <%= raw @bus_schedules.to_json %> 
    //TODO Code 
    </script> 



<table class="table table-hover table-stripped"> 
    <thead> 
     <tr> 
      <th>Travels</th> 
     </tr> 
    </thead> 
    <tbody> 
     <% if @bus_schedules.blank? %> 
      <tr> 
       <td colspan="7"> 
       <center> 
       <div class='alert alert-danger' style="width:100%;"> 
        Opps! No Record Found! 
       </div> 
       </center> 
       </td> 
      </tr> 
     <% else %> 
      <% @bus_schedules.each do |bus_schedule| %> 
       <tr> 
       <td> 
        <b> 
         <span id="res_service_name_218484"><%= @get_operators_hash[bus_schedule.operator_id] %></span> 
        </b>    
       </td> 
       </tr> 
     <% end %> 
    <% end %> 
    </tbody> 
</table>

來源

2014-01-10 Rajesh Gurbani

變種json_data = <（％）= @ json_data.to_json.html_safe％> –

數據即將細Bharat.but你知道如何做到這一點提示/想法？ –

是的，因爲當我們使用任何總是將數據轉換爲json格式的jquery插件，所以在ruby中to_json會生成json數據，並且html_safe只是一種實際將字符串設置爲HTML的方法安全 –

不知道這是否是你想要的。

這將json數據轉換爲html選擇。

see jsFiddle

var json_array = [ 
    {"id":470, "origin_name":"ABC"}, 
    {"id":446, "origin_name":"XYZ"}, 
    {"id":465, "origin_name":"PQR"}, 
    {"id":442, "origin_name":"LUV"} 
], html = '<select>'; 

// map the json data into an html select 
$.map(json_array, function(json) { 
    html += '<option value="' + json.id + '">' 
      + json.origin_name + '</option>'; 
}); 
html += '</select>'; 

$("body").append(
    $(html).change(function() { 
     alert('you selected ' + ($(this).val())); 
    }) 
);

編輯：

這個新版本只顯示符合過濾條件的錶行。不完全是你的表格結構，但你得到它的竅門。

updated jsFiddle

EDIT2：

現在使用複選框濾波器：jsFiddle3

來源

2014-01-17 07:04:47

何塞我顯示在一個表中的整個數據（）好吧。第一次它會打到服務器，它會得到完整的數據現在我將保存完整的數據在js格式的js變量好吧然後我需要使用這個JSON數據只在過濾器，因爲我不希望它每次它會擊中服務器好 –

你可以發佈您的表的示例？我需要知道表格標記才能進行過濾。 –

和何塞這種方法將工作，但我怎樣才能替換特定的表數據。 –

如何在選擇下拉框中的複選框的情況下過濾java腳本中的json數據？

回答

相關問題