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

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>

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

Answer 1

您可以做的是在选择标签中设置选项的值，添加 onchange 以将该值输出到页面例如：

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

制造商函数：

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