Javascript 产品过滤PHP

大家好，我正在做一个产品过滤，我不知道如何才能做到这一点。
我通过获取所选值的值来使用Javascript，然后警告它
，但问题是如何显示它以及如何通过单击x按钮删除所选类别。这是示例页。

非常感谢您的帮助

以下是我的脚本代码：

<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>

jQuery（“#过滤器”）.val（）
jQuery（函数（）{
jQuery（“.productline”）。每个（函数（索引）{
var url=''；
var desc_id=jQuery（this）.eq（0）.find（'.prod desc'）.attr（'id'）；
如果（描述id）{
var file_url=url+desc_id+'/description.html'；
jQuery（'#'+desc_id）.eq（0）.load（文件url）；
}
});
jQuery（“品牌、屏幕大小、cpu、内存、价格”）。更改（函数（）{
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类别=[]；
if（品牌）
{
类别。推送（品牌）；
}
如果（屏幕大小）
{
类别。推送（屏幕大小）；
}
中频（cpu）
{
类别。推送（cpu）；
}
如果（内存）
{
类别。推送（内存）；
}
如果（价格）
{
类别。推送（价格）；
}
长度=类别。长度；
categories2=categories.toString（）；
警报（分类2）；
var分类3=“”；
对于（变量i=0；i

我的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>

选择一个品牌
联想
宏碁
选择屏幕大小
小的
大的
选择一个CPU
英特尔
Amd
选择一个内存
500mb
1tb
按价格筛选
10000
20000

有可能，如果答案不正确，我将更新答案

但是，首先，您能帮助您在运行此代码后得到什么吗

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);
});

---

有可能，如果答案不正确，我将更新答案

但是，首先，您能帮助您在运行此代码后得到什么吗

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);
});

---

这对我来说是服务器端处理。获取用户的输入，通过ajax将其发送到服务器，只返回与传递的参数匹配的产品，并显示这些产品。如果您坚持在客户端执行此操作，我们需要更多地了解您的HTML，而您根本没有向我们展示这些HTML…x按钮在哪里？@Fiido93我更新了代码。我已经显示了它，现在唯一的问题是，单击x按钮后如何删除该类别。这对我来说是服务器端处理。获取用户的输入，通过ajax将其发送到服务器，只返回与传递的参数匹配的产品，并显示这些产品。如果您坚持在客户端执行此操作，我们需要更多地了解您的HTML，而您根本没有向我们展示这些HTML…x按钮在哪里？@Fiido93我更新了代码。我已经显示了它，现在唯一的问题是，单击x按钮后如何删除类别。我更新了代码。我已经显示了它，现在唯一的问题是，单击x按钮后如何删除类别。我更新了代码。我已经显示了它，现在唯一的问题是，单击x按钮后如何删除类别。