3选择框一起改变

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

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

感谢

来源

2012-05-10 user1385301

这不是我只是回答了这个问题？ http://stackoverflow.com/questions/10534819/change-button-to-selectbox-code-change/10534957#10534957 – Sampson

这是你应该怎么写你的脚本，我检查了它的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 
}

来源

2012-05-10 14:33:59 pXel

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

来源

2012-05-10 14:41:11 Thulasiram

现场演示请参阅此链接：http://jsfiddle.net/nanoquantumtech/5Fhjv/ – Thulasiram

3选择框一起改变

回答

相关问题