Javascript 基于两个选择元素以数字方式隐藏div

我知道如何使用jQuery显示和隐藏div，但有一件事我还没有弄清楚，那就是如何根据这些数值隐藏和显示div

下面是我的代码的一个小示例：

<div class="makes MERCEDES-BENZ" style="display: block;">
  <div class="listing-container">
    <h3 class="price-listing">£10,989</h3>
  </div>
    <ul class="overwrite-btstrp-ul">
      <li value="49695">Mileage: 49,695</li>
    </ul>
</div>

£10,989

里程数：49695

正如您所看到的，这个HTML包含一个h3，类为“price listing”，我想根据“price listing”div是否包含表单正在过滤的值，显示和隐藏类为“makes”的div。只是想让你知道我的页面上有一个不同值的“make”div列表

对，我的表格我现在有这个表格：

<form class="car-finder-container" method="GET" action="used-cars.php">
    <select class="form-control select-box price-min">
        <option value="min-price">Min price</option>
        <option value="0">£0</option>
        <option value="500">£500</option>
        ...
    </select>
    <select class="form-control select-box price-max">
        <option value="max-price">Max price</option>
        <option value="0">£0</option>
        <option value="500">£500</option>
        ...
    </select>
</form>

最低价格
£0
£500
...
最高价格
£0
£500
...

因此，第一个选择元素是隐藏h3中数值小于所选选项的值

第二个选择元素是隐藏任何值高于所选数值选项的H3

如果需要的话，我可以给这个价格一个值，就像我在第一个例子中对li所做的一样

有人能给我举一个代码示例来说明如何做到这一点吗？ 谢谢。

最高价格
£0
£500
最低价格
£0
£500
$（“#priceMax”）。更改（函数（）{
var limit=$（this.val（）；
var h3Arr=$（“h3”）；
h3Arr.每个（函数（）{
if（parseInt（$（this）.text（）.substring（1，$（this）.text（）.length）.replace（/，/g，，）>parseInt（limit））{
$（this）.closest（“div[class='makes MERCEDES-BENZ']）.hide（）；
}否则
{
$（this）.closest（“div[class='makes MERCEDES-BENZ']）show（）；
}
})
})
$（“#priceMin”）。更改（函数（）{
var limit=$（this.val（）；
var h3Arr=$（“h3”）；
h3Arr.每个（函数（）{
如果（parseInt（$（this）.text（）.substring（1，$（this）.text（）.length）.replace（/，/g'））您可以尝试：

$('select').change(function () {
    var min = $('select.price-min').val();
    var max = $('select.price-max').val();
    $('div.makes').show();
    $('h3.price-listing').filter(function () {
        var price = +$(this).text().substring(1).replace(',', '');
        if (price < min || price > max) return true;
    }).closest('div.makes').hide();
})

$（'select'）。更改（函数（）{
var min=$（'select.price min'）.val（）；
var max=$（'select.price max'）.val（）；
$（'div.makes'）.show（）；
$（'h3.price listing'）.filter（函数（）{
var price=+$（this.text（）.substring（1）.replace（'，'，''）；
if（pricemax）返回true；
}).closest（'div.makes'）.hide（）；
})


$（'select'）。更改（函数（）{
var min=$（'select.price min'）.val（）；
var max=$（'select.price max'）.val（）；
$（'div.makes'）.show（）；
$（'h3.price listing'）.filter（函数（）{
var price=+$（this.text（）.substring（1）.replace（'，'，''）；
if（pricemax）返回true；
}).closest（'div.makes'）.hide（）；
})

最低价格
£0
£500
£1,000
£1,500
£2,000
£2,500
£3,000
£3,500
£4,000
£4,500
£5,000
£5,500
£6,000
£6,500
£7,000
£7,500
£8,000
£8,500
£9,000
£9,500
£10,000
£11,000
£12,000
£13,000
£14,000
£15,000
£16,000
£17,000
£18,000
£19,000
£20,000
£22,500
£25,000
£27,500
£30,000
£35,000
£40,000
£45,000
£50,000
£55,000
£60,000
£65,000
£70,000
£75,000
£100,000
£250,000
£500,000
最高价格
£0
£500
£1,000
£1,500
£2,000
£2,500
£3,000
£3,500
£4,000
£4,500
£5,000
£5,500
£6,000
£6,500
£7,000
£7,500
£8,000
£8,500
£9,000
£9,500
£10,000
£11,000
£12,000
£13,000
£14,000
£15,000
£16,000
£17,000
£18,000
£19,000
£20,000
£22,500
£25,000
£27,500
£30,000
£35,000
£40,000
£45,000
£50,000
£55,000
£60,000
£65,000
£70,000
£75,000
£100,000
£250,000
£500,000
£15,989

里程数：49695

£10,989

里程数：49695

£25,989

里程数：49695

以下代码适用于您的要求


$（“.price min”）.change（函数（）{
var selVal=$（this.val（）；
$（“h3.price list”）.filter（函数（）{
如果（selVal>parseInt（$（this）.html（）.replace（'，'，''）.replace（'英镑'，''））{
$（this）.closest（'.makes'）.hide（）；
}
});
});
$（“.price max”）.change（函数（）{
var selVal=$（this.val（）；
$（“h3.price list”）.filter（函数（）{
if（selVal


£10,989

里程数：49695

最低价格
£0
£500
£300
£100
£10,000
£11,000    
最高价格
£0
£500
£300
£100
£10,000
£11,000
您能否向我们展示您目前正在尝试使用的JavaScript，并指出哪些地方没有达到预期效果？欢迎使用。
$('select').change(function () {
    var min = $('select.price-min').val();
    var max = $('select.price-max').val();
    $('div.makes').show();
    $('h3.price-listing').filter(function () {
        var price = +$(this).text().substring(1).replace(',', '');
        if (price < min || price > max) return true;
    }).closest('div.makes').hide();
})