產品篩選PHP

大家好我正在做一個產品過濾，我不知道如何實現它。
我使用Javascript通過獲取所選值的值，然後提醒它
但問題是，我怎麼能顯示它，我怎樣才能刪除通過單擊x按鈕選擇的類別。這裏是示例頁面。

非常感謝您的幫助。產品篩選PHP

這裏是我的腳本代碼：

<script> 
    jQuery("#filter").val() 
    jQuery(function(){ 
     jQuery(".product-line").each(function(index) { 
      var url = '<?php echo $upload_url; ?>'; 
      var desc_id = jQuery(this).eq(0).find('.prod-desc').attr('id'); 

      if(desc_id){ 
      var file_url = url + desc_id + '/description.html'; 
      jQuery('#'+desc_id).eq(0).load(file_url); 
      } 

     }); 

     jQuery("#brand,#screen_size,#cpu,#memory,#price").change(function() { 
            var brand = jQuery("#brand").val(); 
      var screen_size = jQuery("#screen_size").val(); 
      var cpu = jQuery("#cpu").val(); 
      var memory = jQuery("#memory").val(); 
      var price = jQuery("#price").val(); 
      var categories =[]; 
      if(brand) 
      { 
       categories.push(brand); 
      } 
      if(screen_size) 
      { 
       categories.push(screen_size); 
      } 
      if(cpu) 
      { 
       categories.push(cpu); 
      } 
      if(memory) 
      { 
       categories.push(memory); 
      } 
      if(price) 
      { 
       categories.push(price); 
      } 
      length = categories.length; 
      categories2 = categories.toString(); 
      alert(categories2); 
      var categories3=""; 
      for(var i = 0; i < length; i++){ 
       categories3 += "<div class='filter_style'>"+categories[i]+"<span style='margin-left:15px;color:gray;'>x</span></div>"; 
       jQuery("#filter").html(categories3); 

      } 
      });  
    }); 

</script>

我的HTML代碼：

 <div style="margin-bottom:5px;"> 
      <select class="form-control product-type" id="brand" > 
       <option value="">Select a Brand</option> 
       <option value="Lenovo">Lenovo</option> 
       <option value="Acer">Acer</option> 
      </select> 
     </div> 

     <div style="margin-bottom:5px;"> 
      <select class="form-control product-type" id="screen_size" style="margin-top:0px;"> 
       <option value="">Select a Screen Size</option> 
       <option value="Small">Small</option> 
       <option value="Large">Large</option> 
      </select> 
     </div> 

     <div style="margin-bottom:5px;"> 
      <select class="form-control product-type" id="cpu"> 
       <option value="">Select a CPU</option> 
       <option value="Intel">Intel</option> 
       <option value="Amd">Amd</option> 
      </select> 
     </div> 

     <div style="margin-bottom:5px;"> 
      <select class="form-control product-type" id="memory"> 
       <option value="">Select a Memory</option> 
       <option value="500mb">500mb</option> 
       <option value="1tb">1tb</option> 
      </select> 
     </div> 
     <div style="margin-bottom:5px;"> 
      <select class="form-control product-type" id="price"> 
       <option value="">Filter by Price</option> 
       <option value="10000">10000</option> 
       <option value="20000">20000</option> 
      </select> 
     </div> 
    </div>

來源

2016-08-16 Jonas Dulay

這對我來說是尖叫服務器端處理。獲取用戶的輸入，通過ajax將其發送到您的服務器，只返回匹配傳遞參數的產品，並顯示它們。如果你堅持做客戶端，我們需要更多地瞭解你的HTML，你沒有向我們展示過任何東西...... – DelightedD0D

x按鈕在哪裏？ – Fiido93

@ Fiido93我更新了代碼。我已經顯示出來了，現在唯一的問題是如何在點擊x按鈕後刪除類別。 –

有可能，我會UPDATE的答案，如果它是不正確的。

但是，首先你能幫助你在運行這段代碼後得到什麼？

jQuery("#brand,#screen_size").change(function() {  
    var brand = jQuery("#brand").val(); 
    var screen_size = jQuery("#screen_size").val(); 
    console.log(brand); 
    console.log(screen_size); 
});

來源

2016-08-16 05:26:30 Fiido93

我更新了代碼。我已經顯示出來了，現在唯一的問題是如何在點擊x按鈕後刪除類別。 –

回答

相關問題