Question

使用价格范围滑块时根据价格显示所有数据......很好

但是，当我已经为前选择城市时。德里。然后我想看看仅根据德里的价格区间

选择下拉列表后的外观

然后我拖动价格范围过滤器它也提供其他城市细节。我不想看到。

例如

我的代码从这里开始，

我的模特

    public function ajax($size = '',$sprice = '',$eprice = '')
{
     $query = "SELECT * from info_user Where user_status ='1'"; 

if(!empty($size)){
    $query  .= " and city in('".$size."')"; 
}
if(!empty($sprice) && !empty($eprice)){
    $query  .=  " and charge_per_hour >='".$sprice."' and charge_per_hour <='".$eprice."'"; 
}

 $result = $this->db->query($query);
 return $result->result();
}

我的ajax价格范围过滤器代码

  $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 1000,
      max: 4000,
      values: [ 500, 4000 ],
      slide: function( event, ui ) {
        $( "#priceshow" ).html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        $( ".price1" ).val(ui.values[ 0 ]);
        $( ".price2" ).val(ui.values[ 1 ]);
        $('.product-data').html('<div id="loaderpro" style=""></div>');

        $.ajax({
            url:"http://localhost/Speakertest/index.php/welcome/ajax",
            type:'post',
            data:{size:size,sprice:$(".price1" ).val(),eprice:$( ".price2" ).val()},
            success:function(result){
                $('.product-data').html(result);
            }
        });
      }
    });

    $( "#priceshow" ).html( "$" + $( "#slider-range" ).slider( "values", 0 ) +
     " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});

这是dropdwon过滤器的代码如果你想看

var size;
$(function(){
    $('.item_filter').change(function(){
        $('.product-data').html('<div id="loaderpro" style="" ></div>');


        var size = $(this).find(":selected").val();

        $.ajax({
            url:"http://localhost/Speakertest/index.php/welcome/ajax",
            type:'post',
            data:{size:size,sprice:$(".price1" ).val(),eprice:$( ".price2" ).val()},
            success:function(result){
                $('.product-data').html(result);
            }
        });
    });

});

Answer 1

 $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 1000,
      max: 4000,
      values: [ 500, 4000 ],
      slide: function( event, ui ) {
        $( "#priceshow" ).html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        $( ".price1" ).val(ui.values[ 0 ]);
        $( ".price2" ).val(ui.values[ 1 ]);
        $('.product-data').html('<div id="loaderpro" style=""></div>');

        //EDITED PART
        var size = $(this).find(":selected").val();

        $.ajax({
            url:"http://localhost/Speakertest/index.php/welcome/ajax",
            type:'post',
            data:{size:size,sprice:$(".price1" ).val(),eprice:$( ".price2" ).val()},
            success:function(result){
                $('.product-data').html(result);
            }
        });
      }
    });

    $( "#priceshow" ).html( "$" + $( "#slider-range" ).slider( "values", 0 ) +
     " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});

修改复制/粘贴代码时我犯了错误

更换：

var size = $(this).find(":selected").val();

TO：

var size = $('.item_filter').find(":selected").val();

按滑块范围过滤

1 个答案: