使用下拉菜单中的值过滤列表

Question

好的，我不太确定自己在做什么，但我的老板希望我为他的技术人员构建一些基本知识，以便在确定空调工作时使用。 我有4个下拉菜单用作过滤器，并且具有所有可能结果的值。 我无法弄清楚如何实现过滤器并使其显示在字段中输入的所有条件。

到目前为止，我有：

<form>

Tonnage
<select id="Tonnage" onchange="Tonnage()">
  <option>Any</option>
  <option>1.5 Ton</option>
  <option>2 Ton</option>  
  <option>2.5 Ton</option>
  <option>3 Ton</option>
  <option>3.5 Ton</option>
  <option>4 Ton</option>
  <option>5 Ton</option>
</select>
</form>

<form>
SEER
<select id="SEER" onchange="SEER()">
  <option>Any</option>
  <option>13</option>
  <option>14</option>
  <option>15</option>  
  <option>16</option>
  <option>17</option>
  <option>18</option>
  <option>20</option>
</select>
</form>

<form>
Manufacturer
<select id="Manufacturer" onchange="Manufacturer()">
  <option>Any</option>
  <option>Amana</option>
  <option>Bryant</option>  
  <option>Carrier</option>
  <option>Goodman</option>
  <option>Nordyne</option>
  <option>Payne</option>
  <option>Ruud</option>
  <option>Trane</option>
</select>
</form>

<form>
Unit Type
<select id="Type" onchange="Type()">
  <option>Any</option>
  <option>Split Heat Pump</option>
  <option>Packaged Heat Pump</option>
</select>
</form>

</form>
<script>

//Amana 1.5 Ton Options
<div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="13" data-Type="Split Heat Pump"</div>
<div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="13" data-Type="Packaged Heat Pump"</div>
<div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="14" data-Type="Split Heat Pump"</div>
<div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="14" data-Type="Packaged Heat Pump"</div>
<div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="15" data-Type="Split Heat Pump"</div>
<div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="15" data-Type="Packaged Heat Pump"</div>
<div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="16" data-Type="Split Heat Pump"</div>
<div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="16" data-Type="Packaged Heat Pump"</div>
<div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="17" data-Type="Split Heat Pump"</div>
<div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="17" data-Type="Packaged Heat Pump"</div>
<div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="18" data-Type="Split Heat Pump"</div>
<div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="18" data-Type="Packaged Heat Pump"</div>
<div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="20" data-Type="Split Heat Pump"</div>
<div class="result" data-Tonnage="1.5" data-Manufacturer="Amana" data-SEER="20" data-Type="Packaged Heat Pump"</div>

我的divs还有近800个结果。 甚至可以使用javascript还是有更好的选择？ 提前致谢！

Answer 1

您可以做的是设置选项的值，在select标记中添加onchange以将该值输出到页面ex：

<select id="Manufacturer" onchange="Manufacturer(this.value)">
<option value="foo">Foo</option>
</select>

制造商功能：

function Manufacturer(value) {
 document.getElementById('output').innerHTML=value
}