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

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

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

制造商功能：

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

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

1 个答案: