Ajax使用jQuery，滑塊，收音機，複選框過濾結果

Question

我想要一個頁面，我將顯示一個表格，顯示的表格基於頁面上的選擇並通過ajax進行更新。

我在頁面上有兩個範圍滑塊，一個是價格，另一個是大小也有複選框，這樣你就可以選擇木材，金屬和/或塑料。

我需要我應該怎麼構建了jQuery通過在所有這些參數的幫助。

我知道該怎麼做的PHP和如何生成表等，但我堅持構建了jQuery，以允許所有各種選擇，請任何幫助與此表示讚賞。

更新--------------------------------------------- ------------------

嗨

感謝您的答覆，但該計劃已經略有改變：

我的材料清單UL，木材/塑料和金屬，

用戶應該先選擇其中一個，然後顯示錶格。

當顯示錶格時，還會顯示一個jQuery UI範圍滑塊，您可以在此更改大小範圍，並根據這些選擇更新表格，請注意所選材質需要重新發送，並且通過ajax選擇大小（基本上需要代碼記住所選材料）。

請查看下面的代碼，我在那一刻：

 





    

$(function() { 
    $slider = $("#slider");//Caching slider object 
    $size = $("#size");//Caching size object 
    $slider.slider({ 
     range: true, // necessary for creating a range slider 
     min: 0, // minimum range of slider 
     max: 50, //maximimum range of slider 
     values: [0, 50], //initial range of slider 
     step: 0.2, 
     slide: function(event, ui) { // This event is triggered on every mouse move during slide. 
      $size.html('$' + ui.values[0] + ' - $' + ui.values[1]);//set value of size span to current slider values 
     }, 
     stop: function(event, ui){//This event is triggered when the user stops sliding. 
      getDiamonds(); 
     } 
    }); 
    $size.html($slider.slider("values", 0) + 'm - ' + $slider.slider("values", 1) + 'm'); 
}); 

function getTable(){ 
    $.ajax({ 
     type: "POST", 
     url: "getTable.php", 
     data: "szMin="+$slider.slider('values', 0)+"&szMax="+$slider.slider('values', 1)+"material="+$('#material_type').val(), 
     success: function(responseText){ 
      $('#txtHint').html(responseText); 
      $(".tablesorter").collapsible("td.collapsible", {collapse: true}) 
      .tablesorter({sortList: [[5,1]],headers: {0: {sorter: false}}, widgets: ['zebra'], onRenderHeader: function(){this.wrapInner("");}, debug: false}) 
      .tablesorterPager({container: $("#pager"), positionFixed: false}); 
      $("tr.first_row_class").hover(
       function() {$(this).children('td').attr("style","background-color:#FDF5CE");},function() {$(this).children('td').removeAttr("style");}); 
     } 
    }); 
}; 
$(function() { 
    $('#selectable').selectable({ 
     stop: function() { 
      var selectedLI = $('.ui-selected', this).attr("id"); 
      //alert(selectedLI); 
     } 
    }); 
}); 

在這之後我有UL李名單（李有ID =「塑料/木頭或金屬」

一旦材料被選中，我想要顯示滑塊，並且應該使用範圍滑塊中的值發佈ajax，並且應該記住materialType。

Sorr如果我只是試圖儘可能清楚地重複自己。最後，我還想盡可能高效地使用jquery，稍後我可能會考慮添加其他滑塊和選擇。

感謝您的幫助。 Ps，沒有提交按鈕，更新應該在滑塊釋放時發生，或者點擊materialtype。

Answer 1

您的問題沒有說清楚，但我想下面的函數將是有益的..

function wrapData($jqr){ 
     if(typeof $jqr == 'string') {$jqr = $($jqr)} 
     var data = {}; 
     $jqr.find('select,input:text,input:hidden,textarea,input:password').each(function(){ 
      var $t = $(this); 
      var name = $t.attr('name')||$t.attr('id'); 
      data[name] = $t.val(); 
     }); 
     $jqr.find('input:checkbox').each(function(){ 
      var $t = $(this); 
      var name = $t.attr('name')||$t.attr('id'); 
      if($t.is(':checked')){ 
       data[name] = true; 
      } else { 
       data[name] = false; 
      } 
     }); 
     $jqr.find('input:radio').each(function(){ 
      var $t = $(this); 
      var name = $t.attr('name')||$t.attr('id'); 
      if($t.is(':checked')){ 
       data[name] = $t.val(); 
      } 
     }); 
     return data; 
    } 

$('#submit').click(function(){ var data = wrapData('#all_inputs') 
    /* you can then send the parameters to your server */ }) 

希望幫助你。