Question

在我的网站上我添加了3个过滤器，燃料类型，驱动类型和车型，我得到了代码半工作，它显示基于选择框的汽车，但有一个问题，我希望它不显示其他选择。 EG当你选择汽油汽车它显示一些不是手动的汽车，但是汽油车，我只希望它显示完全匹配，所以如果你选择汽油手动车，它只会显示汽车是汽油和手动和汽车。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>


 <script type="text/javascript" src="jquery.js"></script>          
 <script type="text/javascript">
$(function() {
    var fuel = ''; // Keep track of selections
    var drive = '';
    var type = '';
    $('#fuel select').on("change", function() {
    fuel = (this.value ? '.' : '') + this.value;
    selectModels();
});
        $('#drive select').on("change", function() {
    fuel = (this.value ? '.' : '') + this.value;
    selectModels();
});
    $('#type select').on("change", function() {
    fuel = (this.value ? '.' : '') + this.value;
    selectModels();
});
    function selectModels() { // Select matching models
        $('div.modelContainer').hide(). // Hide all
            filter(fuel + drive + type).show(); // Show matches
    }
});
</script>
</head>
<body>
<div id="fuel" class="controller">
<span class="controllerLabel">fuel:</span>
<select>
  <option value="all">all</option>
  <option value="petrol">petrol</option>
  <option value="diesel">diesel</option>
</select>
</div>



<div id="drive" class="controller">
<span class="controllerLabel">drive:</span>
<select>
  <option value="all">all</option>
  <option value="auto">auto</option>
  <option value="manual">manual</option>
</select>
</div>
<div id="type" class="controller">
<span class="controllerLabel">type:</span>
<select>
  <option value="all">all</option>
  <option value="car">car</option>
  <option value="4">4x4</option>
  <option value="7">peoeple</option>
  <option value="vanl">van</option>
</select>
</div>



<div class="modelContainer  petrolmanualcar">

<!-- <a id="" href="panda.html" title="Panda 1.2" accesskey="1"></a> -->
<p><img align="right" alt="Panda 1.2" id="image47" title="Clio 1.2" src="images/panda.jpg" width="150" height="115"></img></p>
<div class="c2"><big><a href="Panda.html"><strong>Fiat Panda 1.2 5Dr:</strong></a></big><br></br>
&pound;25.00 per Day<p>
&pound;130.00 per week</p>
</div>

</div>





<div class="modelContainer  petrol auto car">

<!-- <a id="" href="focus.html" title="Auto. Focus 1.6" accesskey="1"></a>-->
<p><img align="right" alt="Automatic 1.6" id="image4foc" title="Automatic or Manual Focus 1.6" src="images/Focus.jpg" width="200" height="130"></img></p>
<div class="c2"><big><a href="focus.html"><strong>Auto. Ford Focus 1.6:</strong></a></big><br></br>
&pound;32.00 per day<p>
&pound;175.00 per week</p>
</div>

</div>


<div class="modelContainer diesel manual car">

<!-- <a id="" href="rio.html" title="Kia Rio 1.5 Crdi" accesskey="1"></a> -->
<p><img align="right" alt="rio" id="imagerio" title="rio" src="images/rio.jpg" width="180" height="105"></img></p>
<div class="c2"><big><a href="rio.html"><strong>Kia Rio 1.5 CRDi:</strong></a></big><br></br>
&pound;28.00 per day<p>
&pound;155.00 week</p>
</div>

</div>

<div class="modelContainer  diesel manual 4">
<!-- <a id="" href="sportage.html" title="Kia Sportage 2 1.7 Manual CRDi" accesskey="1"></a>-->
<p><img align="right" alt="Kia Sportage" id="imagesport" title="Kia Sportage 1.7 CRDi" src="images/sportage.jpg" width="210" height="130"></img></p>
<div class="c2"><big><a href="sportage.html"><strong>Kia Sportage 2 1.7 CRDi:</strong></a></big><br></br>
<p>£45.00 per day<br />
&pound;120.00 per 3 days<br />
£250.00 per week</p>
</div>

</div>

<div class="modelContainer diesel manual van">

<!-- <a id="" href="kangoo.html" title="Renault Kangoo Van SL17 Dci70+" accesskey="1"></a>-->
<p><img align="right" alt="Renault Kangoo Van SL17 Dci70+" id="imagekang" title="Renault Kangoo Van" src="images/kangoo.jpg" width="190" height="100"></img></p>
<div class="c2"><big><a href="kangoo.html"><strong>Renault Kangoo Van SL17 Dci70+:</strong></a></big><br></br>
&pound;26.50 per day<p>
&pound;150.00 per week</p>
</div>

</div>

<div class="modelContainer diesel auto car">

<!-- <a id="" href="ceed.html" title="Kia Ceed sports tourer CRDi" accesskey="1"></a>-->
<p><img align="right" alt="Kia Ceed Sports Tourer" id="imageceedst" title="Kia Ceed sports tourer" src="images/ceed.jpg" width="210" height="90"></img></p>
<div class="c2"><big><a href="ceed.html"><strong>Auto. Kia Ceed Sports Tourer CRDi :</strong></a></big><br></br>
&pound;35.00 per day<p>
&pound;200.00 per week</p>
</div>

</div>

<div class="modelContainer diesel auto 4">

<!-- <a id="" href="sportageauto.html" title="Kia Sportage KX2 2.0 Auto 4X4" accesskey="1"></a>-->
<p><img align="right" alt="Kia Sportage" id="imageautosport" title="Kia Sportage 1.7 CRDi" src="images/sportage.jpg" width="210" height="130"></img></p>
<div class="c2"><big><a href="sportageauto.html"><strong>Auto. Kia Sportage KX2 2.0 4X4:</strong></a></big><br></br>
<p>&pound;50.00 per day<br />
&pound;125 per 3 days<br />
&pound;270.00 per week</p>
</div>

</div>

<div class="modelContainer diesel auto 7">

<!-- <a id="" href="newgalaxy.html" title="New Automatic Galaxy 2.0 TDi" accesskey="1"></a>-->
<p><img align="right" alt="New Auto Galaxy" id="imagegal" title="New Automatic Galaxy 2.0 TDi" src="images/newgalaxy.jpg" width="240" height="150"></img></p>
<div class="c2"><big><a href="newgalaxy.html"><strong>Auto. Ford Galaxy 2.0 TDI 7 Seater:</strong></a></big><br></br>
<p>&pound;65.00 per day<br />
&pound;165 per 3 days<br />
&pound;310.00 per week</p>
</div>

</div>

<div class="modelContainer diesel auto 7 4">

<!-- <a id="" href="sorento.html" title=
Kia Sorento 4X4 Automatic" accesskey="1"></a>-->
<p><img align="right" alt="sorento" id="imagesor" title="Kia Sorento 4X4" src="images/sorento.jpg" width="300" height="200"></img></p>
<div class="c2"><big><a href="sorento.html"><strong>Auto. Kia Sorento KX3 CRDi 4X4 7 Seater:</strong></a></big><br></br>
<p>&pound;70 per day<br />
&pound;180 per 3 days<br />
&pound;360 per week</p>
</div>

</div>
</body>
</html>

感谢

Answer 1

这是你应该编写脚本的方法，我在JSFiddle上检查它并且它有效。 JSFiddle示例可以在这里找到：click here

$('#fuel select').on("change", function() {
    selectModels();
});
$('#drive select').on("change", function() {
    selectModels();
});
$('#type select').on("change", function() {
    selectModels();
});

function selectModels() { // Select matching models
    var fuel = $("#fuel select :selected").val();
    var drive = $("#drive select :selected").val();
    var type = $("#type select :selected").val();
    //alert("[" + fuel + "/" + drive + "/" + type + "]");

    var extraClasses = '';    
    if(fuel && fuel != "all") {
        extraClasses += "." + fuel;
    }
    if(drive && drive != "all") {
        extraClasses += "." + drive;
    }
    if(type && type != "all") {
        extraClasses += "." + type;
    }
    //alert(extraClasses);

    $('div.modelContainer').hide(); // Hide all
    $('div.modelContainer' + extraClasses).show(); // Show matches
}

Answer 2

 $(function () {
            var fuel = ''; // Keep track of selections
            var drive = '';
            var type = '';
            $('#fuel select').on("change", function () {
                fuel = ($(this).val() === 'all' ? '' : '[class*="' + $(this).val() + '"]');
                selectModels();
            });

            $('#drive select').on("change", function () {
                drive = ($(this).val() === 'all' ? '' : '[class*="' + $(this).val() + '"]');
                selectModels();
            });

            $('#type select').on("change", function () {
                type = ($(this).val() === 'all' ? '' : '[class*="' + $(this).val() + '"]');
                selectModels();
            });

            function selectModels() { // Select matching models
                $('div.modelContainer').hide(); // Hide all
                $('div.modelContainer' + fuel + drive + type).show();
            }
        });

3选择一起改变框

2 个答案: