我需要在应用过滤器之前隐藏所有filterContainer数据

Question

因此我为我正在处理的Web应用程序创建了一个简单的运费计算器。根据重量和目的地过滤运费。

如何在应用过滤器之前隐藏所有费率？

我还想在下拉列表中添加一个搜索过滤器国家/地区下拉列表。

以下评论与我到目前为止所做的工作有关。

提前谢谢你：）

Answer 1

像这样，首先隐藏容器，然后在更改时显示结果。
检查以下代码段

$('#FilterContainer').hide();

$("select.filterby").change(function(){
    var filters = $.map($("select.filterby").toArray(), function(e){
        return $(e).val();
    }).join(".");
    $("div#FilterContainer").find("div").hide();
  $('#FilterContainer').show(); 
    $("div#FilterContainer").find("div." + filters).show(); 
});

＆＃13;

＆＃13;

$('#FilterContainer').hide();

$("select.filterby").change(function() {
  var filters = $.map($("select.filterby").toArray(), function(e) {
    return $(e).val();
  }).join(".");
  $("div#FilterContainer").find("div").hide();
  $('#FilterContainer').show();
  $("div#FilterContainer").find("div." + filters).show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Filter:</p>
<select class="filterby">
  <option value="L">
    <h5>Afghanistan</h5>
  </option>
  <option value="E">
    <h5>Albania</h5>
  </option>
  <option value="M">
    <h5>Algeria</h5>
  </option>
  <option value="I">
    <h5>American Samoa</h5>
  </option>
  <option value="D">
    <h5>Andorra</h5>
  </option>
  <option value="M">
    <h5>Angola</h5>
  </option>
  <option value="J">
    <h5>Anguilla</h5>
  </option>
  <option value="J">
    <h5>Antigua</h5>
  </option>
  <option value="K">
    <h5>Argentina</h5>
  </option>
  <option value="L">
    <h5>Armenia</h5>
  </option>
  <option value="J">
    <h5>Aruba</h5>
  </option>
  <option value="H2">
    <h5>Australia</h5>
  </option>
  <option value="D">
    <h5>Austria</h5>
  </option>
  <option value="E">
    <h5>Azerbaijan</h5>
  </option>
  <option value="J">
    <h5>Bahamas</h5>
  </option>
  <option value="L">
    <h5>Bahrain</h5>
  </option>
  <option value="H2">
    <h5>Bangladesh</h5>
  </option>
  <option value="J">
    <h5>Barbados</h5>
  </option>
  <option value="E">
    <h5>Belarus</h5>
  </option>
  <option value="C">
    <h5>Belgium</h5>
  </option>
  <option value="K">
    <h5>Belize</h5>
  </option>
  <option value="M">
    <h5>Benin</h5>
  </option>
  <option value="J">
    <h5>Bermuda</h5>
  </option>
  <option value="I">
    <h5>Bhutan</h5>
  </option>
  <option value="K">
    <h5>Bolivia</h5>
  </option>
  <option value="J">
    <h5>Bonaire</h5>
  </option>
  <option value="E">
    <h5>Bosnia & Herzegovina</h5>
  </option>
  <option value="M">
    <h5>Botswana</h5>
  </option>
  <option value="K">
    <h5>Brazil</h5>
  </option>
  <option value="I">
    <h5>Brunei</h5>
  </option>
  <option value="D">
    <h5>Bulgaria</h5>
  </option>
  <option value="M">
    <h5>Burkina Faso</h5>
  </option>
  <option value="M">
    <h5>Burundi</h5>
  </option>
  <option value="I">
    <h5>Cambodia</h5>
  </option>
  <option value="M">
    <h5>Cameroon</h5>
  </option>
  <option value="A">
    <h5>Canada</h5>
  </option>
  <option value="D">
    <h5>Canary Islands</h5>
  </option>
  <option value="M">
    <h5>Cape Verde</h5>
  </option>
  <option value="J">
    <h5>Cayman Islands</h5>
  </option>
  <option value="M">
    <h5>Central African Republic</h5>
  </option>
  <option value="M">
    <h5>Chad</h5>
  </option>
  <option value="K">
    <h5>Chile</h5>
  </option>
  <option value="G">
    <h5>China</h5>
  </option>
  <option value="K">
    <h5>Colombia</h5>
  </option>
  <option value="M">
    <h5>Comoros Islands</h5>
  </option>
  <option value="M">
    <h5>Congo</h5>
  </option>
  <option value="M">
    <h5>Congo, Democratic Republic</h5>
  </option>
  <option value="I">
    <h5>Cook Islands</h5>
  </option>
  <option value="K">
    <h5>Costa Rica</h5>
  </option>
  <option value="E">
    <h5>Croatia</h5>
  </option>
  <option value="J">
    <h5>Cuba</h5>
  </option>
  <option value="J">
    <h5>Curacao</h5>
  </option>
  <option value="D">
    <h5>Cyprus</h5>
  </option>
  <option value="D">
    <h5>Czech Republic</h5>
  </option>
  <option value="D">
    <h5>Denmark</h5>
  </option>
  <option value="M">
    <h5>Djibouti</h5>
  </option>
  <option value="J">
    <h5>Dominica</h5>
  </option>
  <option value="J">
    <h5>Dominican Republic</h5>
  </option>
  <option value="I">
    <h5>East Timor</h5>
  </option>
  <option value="K">
    <h5>Ecuador</h5>
  </option>
  <option value="L">
    <h5>Egypt</h5>
  </option>
  <option value="K">
    <h5>El Salvador</h5>
  </option>
  <option value="M">
    <h5>Equatorial Guinea</h5>
  </option>
  <option value="M">
    <h5>Eritrea</h5>
  </option>
  <option value="D">
    <h5>Estonia</h5>
  </option>
  <option value="M">
    <h5>Ethiopia</h5>
  </option>
  <option value="K">
    <h5>Falkland Islands</h5>
  </option>
  <option value="D">
    <h5>Faroe Islands</h5>
  </option>
  <option value="I">
    <h5>Fiji</h5>
  </option>
  <option value="D">
    <h5>Finland</h5>
  </option>
  <option value="C">
    <h5>France</h5>
  </option>
  <option value="K">
    <h5>French Guyana</h5>
  </option>
  <option value="M">
    <h5>Gabon</h5>
  </option>
  <option value="M">
    <h5>Gambia</h5>
  </option>
  <option value="E">
    <h5>Georgia</h5>
  </option>
  <option value="C">
    <h5>Germany</h5>
  </option>
  <option value="M">
    <h5>Ghana</h5>
  </option>
  <option value="D">
    <h5>Gibraltar</h5>
  </option>
  <option value="D">
    <h5>Greece</h5>
  </option>
  <option value="D">
    <h5>Greenland</h5>
  </option>
  <option value="J">
    <h5>Grenada</h5>
  </option>
  <option value="J">
    <h5>Guadeloupe</h5>
  </option>
  <option value="H2">
    <h5>Guam</h5>
  </option>
  <option value="K">
    <h5>Guatemala</h5>
  </option>
  <option value="D">
    <h5>Guernsey</h5>
  </option>
  <option value="M">
    <h5>Guinea</h5>
  </option>
  <option value="M">
    <h5>Guinea-Bissau</h5>
  </option>
  <option value="K">
    <h5>Guyana</h5>
  </option>
  <option value="J">
    <h5>Haiti</h5>
  </option>
  <option value="K">
    <h5>Honduras</h5>
  </option>
  <option value="H1">
    <h5>Hong Kong</h5>
  </option>
  <option value="D">
    <h5>Hungary</h5>
  </option>
  <option value="D">
    <h5>Iceland</h5>
  </option>
  <option value="H2">
    <h5>India</h5>
  </option>
  <option value="H2">
    <h5>Indonesia</h5>
  </option>
  <option value="L">
    <h5>Iran</h5>
  </option>
  <option value="L">
    <h5>Iraq</h5>
  </option>
  <option value="C">
    <h5>Ireland</h5>
  </option>
  <option value="L">
    <h5>Israel</h5>
  </option>
  <option value="C">
    <h5>Italy</h5>
  </option>
  <option value="M">
    <h5>Ivory Coast</h5>
  </option>
  <option value="J">
    <h5>Jamaica</h5>
  </option>
  <option value="F">
    <h5>Japan</h5>
  </option>
  <option value="D">
    <h5>Jersey</h5>
  </option>
  <option value="L">
    <h5>Jordan</h5>
  </option>
  <option value="E">
    <h5>Kazakhstan</h5>
  </option>
  <option value="M">
    <h5>Kenya</h5>
  </option>
  <option value="I">
    <h5>Kiribati</h5>
  </option>
  <option value="I">
    <h5>Korea, North (DPR)</h5>
  </option>
  <option value="F">
    <h5>Korea, South</h5>
  </option>
  <option value="E">
    <h5>Kosovo</h5>
  </option>
  <option value="L">
    <h5>Kuwait</h5>
  </option>
  <option value="E">
    <h5>Kyrgyzstan</h5>
  </option>
  <option value="I">
    <h5>Laos</h5>
  </option>
  <option value="D">
    <h5>Latvia</h5>
  </option>
  <option value="L">
    <h5>Lebanon</h5>
  </option>
  <option value="M">
    <h5>Lesotho</h5>
  </option>
  <option value="M">
    <h5>Liberia</h5>
  </option>
  <option value="M">
    <h5>Libya</h5>
  </option>
  <option value="D">
    <h5>Liechtenstein</h5>
  </option>
  <option value="D">
    <h5>Lithuania</h5>
  </option>
  <option value="C">
    <h5>Luxembourg</h5>
  </option>
  <option value="H2">
    <h5>Macau</h5>
  </option>
  <option value="E">
    <h5>Macedonia</h5>
  </option>
  <option value="M">
    <h5>Madagascar</h5>
  </option>
  <option value="M">
    <h5>Malawi</h5>
  </option>
  <option value="H2">
    <h5>Malaysia</h5>
  </option>
  <option value="I">
    <h5>Maldives</h5>
  </option>
  <option value="M">
    <h5>Mali</h5>
  </option>
  <option value="D">
    <h5>Malta</h5>
  </option>
  <option value="I">
    <h5>Marshall Islands</h5>
  </option>
  <option value="J">
    <h5>Martinique</h5>
  </option>
  <option value="M">
    <h5>Mauritania</h5>
  </option>
  <option value="M">
    <h5>Mauritius</h5>
  </option>
  <option value="M">
    <h5>Mayotte</h5>
  </option>
  <option value="B">
    <h5>Mexico</h5>
  </option>
  <option value="H2">
    <h5>Micronesia</h5>
  </option>
  <option value="E">
    <h5>Moldova</h5>
  </option>
  <option value="C">
    <h5>Monaco</h5>
  </option>
  <option value="I">
    <h5>Mongolia</h5>
  </option>
  <option value="E">
    <h5>Montenegro, Republic of</h5>
  </option>
  <option value="J">
    <h5>Montserrat</h5>
  </option>
  <option value="M">
    <h5>Morocco</h5>
  </option>
  <option value="M">
    <h5>Mozambique</h5>
  </option>
  <option value="I">
    <h5>Myanmar</h5>
  </option>
  <option value="M">
    <h5>Namibia</h5>
  </option>
  <option value="I">
    <h5>Nauru, Republic Of</h5>
  </option>
  <option value="I">
    <h5>Nepal</h5>
  </option>
  <option value="C">
    <h5>Netherlands, The</h5>
  </option>
  <option value="J">
    <h5>Nevis</h5>
  </option>
  <option value="I">
    <h5>New Caledonia</h5>
  </option>
  <option value="H2">
    <h5>New Zealand</h5>
  </option>
  <option value="K">
    <h5>Nicaragua</h5>
  </option>
  <option value="M">
    <h5>Niger</h5>
  </option>
  <option value="M">
    <h5>Nigeria</h5>
  </option>
  <option value="I">
    <h5>Niue</h5>
  </option>
  <option value="D">
    <h5>Norway</h5>
  </option>
  <option value="L">
    <h5>Oman</h5>
  </option>
  <option value="L">
    <h5>Pakistan</h5>
  </option>
  <option value="H2">
    <h5>Palau</h5>
  </option>
  <option value="K">
    <h5>Panama</h5>
  </option>
  <option value="I">
    <h5>Papua New Guinea</h5>
  </option>
  <option value="K">
    <h5>Paraguay</h5>
  </option>
  <option value="K">
    <h5>Peru</h5>
  </option>
  <option value="H2">
    <h5>Philippines, The</h5>
  </option>
  <option value="D">
    <h5>Poland</h5>
  </option>
  <option value="C">
    <h5>Portugal</h5>
  </option>
  <option value="P">
    <h5>Puerto Rico  (US to PR)</h5>
  </option>
  <option value="L">
    <h5>Qatar</h5>
  </option>
  <option value="M">
    <h5>Reunion Island</h5>
  </option>
  <option value="D">
    <h5>Romania</h5>
  </option>
  <option value="E">
    <h5>Russia</h5>
  </option>
  <option value="M">
    <h5>Rwanda</h5>
  </option>
  <option value="H2">
    <h5>Saipan</h5>
  </option>
  <option value="C">
    <h5>San Marino</h5>
  </option>
  <option value="M">
    <h5>Sao Tome & Principe</h5>
  </option>
  <option value="L">
    <h5>Saudi Arabia</h5>
  </option>
  <option value="M">
    <h5>Senegal</h5>
  </option>
  <option value="E">
    <h5>Serbia, Republic of</h5>
  </option>
  <option value="M">
    <h5>Seychelles</h5>
  </option>
  <option value="M">
    <h5>Sierra Leone</h5>
  </option>
  <option value="H2">
    <h5>Singapore</h5>
  </option>
  <option value="D">
    <h5>Slovakia</h5>
  </option>
  <option value="D">
    <h5>Slovenia</h5>
  </option>
  <option value="I">
    <h5>Solomon Islands</h5>
  </option>
  <option value="M">
    <h5>Somalia</h5>
  </option>
  <option value="M">
    <h5>Somaliland</h5>
  </option>
  <option value="M">
    <h5>South Africa</h5>
  </option>
  <option value="M">
    <h5>South Sudan</h5>
  </option>
  <option value="C">
    <h5>Spain</h5>
  </option>
  <option value="H2">
    <h5>Sri Lanka</h5>
  </option>
  <option value="J">
    <h5>St. Barthelemy</h5>
  </option>
  <option value="J">
    <h5>St. Eustatius</h5>
  </option>
  <option value="M">
    <h5>St. Helena</h5>
  </option>
  <option value="J">
    <h5>St. Kitts</h5>
  </option>
  <option value="J">
    <h5>St. Lucia</h5>
  </option>
  <option value="J">
    <h5>St. Maarten</h5>
  </option>
  <option value="J">
    <h5>St. Vincent</h5>
  </option>
  <option value="M">
    <h5>Sudan</h5>
  </option>
  <option value="K">
    <h5>Suriname</h5>
  </option>
  <option value="M">
    <h5>Swaziland</h5>
  </option>
  <option value="D">
    <h5>Sweden</h5>
  </option>
  <option value="D">
    <h5>Switzerland</h5>
  </option>
  <option value="L">
    <h5>Syria</h5>
  </option>
  <option value="I">
    <h5>Tahiti</h5>
  </option>
  <option value="H1">
    <h5>Taiwan</h5>
  </option>
  <option value="E">
    <h5>Tajikistan</h5>
  </option>
  <option value="M">
    <h5>Tanzania</h5>
  </option>
  <option value="H2">
    <h5>Thailand</h5>
  </option>
  <option value="M">
    <h5>Togo</h5>
  </option>
  <option value="I">
    <h5>Tonga</h5>
  </option>
  <option value="J">
    <h5>Trinidad & Tobago</h5>
  </option>
  <option value="M">
    <h5>Tunisia</h5>
  </option>
  <option value="L">
    <h5>Turkey</h5>
  </option>
  <option value="J">
    <h5>Turks & Caicos Islands</h5>
  </option>
  <option value="I">
    <h5>Tuvalu</h5>
  </option>
  <option value="M">
    <h5>Uganda</h5>
  </option>
  <option value="E">
    <h5>Ukraine</h5>
  </option>
  <option value="L">
    <h5>United Arab Emirates</h5>
  </option>
  <option value="C">
    <h5>United Kingdom</h5>
  </option>
  <option value="K">
    <h5>Uruguay</h5>
  </option>
  <option value="E">
    <h5>Uzbekistan</h5>
  </option>
  <option value="I">
    <h5>Vanuatu</h5>
  </option>
  <option value="K">
    <h5>Venezuela</h5>
  </option>
  <option value="H2">
    <h5>Vietnam</h5>
  </option>
  <option value="J">
    <h5>Virgin Islands (British)</h5>
  </option>
  <option value="J">
    <h5>Virgin Islands (US)</h5>
  </option>
  <option value="I">
    <h5>Western Samoa</h5>
  </option>
  <option value="L">
    <h5>Yemen, Republic of</h5>
  </option>
  <option value="M">
    <h5>Zambia</h5>
  </option>
  <option value="M">
    <h5>Zimbabwe</h5>
  </option>

</select>



<p>Location:</p>
<select class="filterby">
  <option value="1">
    <h5>1 Pound</h5>
  </option>
  <option value="2">
    <h5>2 Pounds</h5>
  </option>
  <option value="3">
    <h5>3 Pounds</h5>
  </option>
  <option value="4">
    <h5>4 Pound</h5>
  </option>
  <option value="5">
    <h5>5 Pounds</h5>
  </option>
  <option value="6">
    <h5>6 Pounds</h5>
  </option>
  <option value="7">
    <h5>7 Pounds</h5>
  </option>
  <option value="8">
    <h5>8 Pound</h5>
  </option>
  <option value="9">
    <h5>9 Pounds</h5>
  </option>
  <option value="10">
    <h5>10 Pounds</h5>
  </option>

</select>

<div id="FilterContainer">
  <div class="A 1">$21.29</div>
  <div class="A 2">$23.33</div>
  <div class="A 3">$25.35</div>
  <div class="A 4">$27.27</div>
  <div class="A 5">$29.17</div>
  <div class="A 6">$29.94</div>
  <div class="A 7">$30.77</div>
  <div class="A 8">$32.05</div>
  <div class="A 9">$33.08</div>
  <div class="A 10">$34.19</div>
  <div class="B 1">$21.22</div>
  <div class="B 2">$23.18</div>
  <div class="B 3">$26.63</div>
  <div class="B 4">$28.73</div>
  <div class="B 5">$31.53</div>
  <div class="B 6">$34.17</div>
  <div class="B 7">$36.80</div>
  <div class="B 8">$39.60</div>
  <div class="B 9">$41.44</div>
  <div class="B 10">$42.03</div>
  <div class="C 1">$25.34</div>
  <div class="C 2">$29.35</div>
  <div class="C 3">$33.37</div>
  <div class="C 4">$37.41</div>
  <div class="C 5">$41.46</div>
  <div class="C 6">$42.94</div>
  <div class="C 7">$45.15</div>
  <div class="C 8">$47.35</div>
  <div class="C 9">$49.57</div>
  <div class="C 10">$50.33</div>
  <div class="D 1">29.36</div>
  <div class="D 2">33.56</div>
  <div class="D 3">37.74</div>
  <div class="D 4">41.78</div>
  <div class="D 5">45.82</div>
  <div class="D 6">48.97</div>
  <div class="D 7">52.14</div>
  <div class="D 8">54.8</div>
  <div class="D 9">57.93</div>
  <div class="D 10">60.5</div>
  <div class="E 1">41.3</div>
  <div class="E 2">48.74</div>
  <div class="E 3">56.1</div>
  <div class="E 4">63.29</div>
  <div class="E 5">70.49</div>
  <div class="E 6">74.59</div>
  <div class="E 7">78.67</div>
  <div class="E 8">82.76</div>
  <div class="E 9">86.84</div>
  <div class="E 10">90.92</div>
  <div class="F 1">$24.36</div>
  <div class="F 2">$28.42</div>
  <div class="F 3">$32.48</div>
  <div class="F 4">$36.49</div>
  <div class="F 5">$40.51</div>
  <div class="F 6">$42.44</div>
  <div class="F 7">$44.38</div>
  <div class="F 8">$46.32</div>
  <div class="F 9">$48.26</div>
  <div class="F 10">$50.21</div>
  <div class="G 1">$26.78</div>
  <div class="G 2">$30.43</div>
  <div class="G 3">$34.12</div>
  <div class="G 4">$37.15</div>
  <div class="G 5">$40.80</div>
  <div class="G 6">$44.34</div>
  <div class="G 7">$47.23</div>
  <div class="G 8">$50.11</div>
  <div class="G 9">$52.74</div>
  <div class="G 10">$54.60</div>
  <div class="H1 1">$23.69</div>
  <div class="H1 2">$27.47</div>
  <div class="H1 3">$31.36</div>
  <div class="H1 4">$34.18</div>
  <div class="H1 5">$38.36</div>
  <div class="H1 6">$40.76</div>
  <div class="H1 7">$43.89</div>
  <div class="H1 8">$45.55</div>
  <div class="H1 9">$48.01</div>
  <div class="H1 10">$49.74</div>

  <div class="H2 1 ">$26.69</div>
  <div class="H2 2">$31.03</div>
  <div class="H2 3">$35.34</div>
  <div class="H2 4">$39.60</div>
  <div class="H2 5">$43.31</div>
  <div class="H2 6">$47.04</div>
  <div class="H2 7">$50.81</div>
  <div class="H2 8">$54.61</div>
  <div class="H2 9">$58.41</div>
  <div class="H2 10">$62.21</div>
  <div class="I 1">$39.80</div>
  <div class="I 2">$42.37</div>
  <div class="I 3">$44.92</div>
  <div class="I 4">$50.87</div>
  <div class="I 5">$55.13</div>
  <div class="I 6">$59.38</div>
  <div class="I 7">$67.64</div>
  <div class="I 8">$75.91</div>
  <div class="I 9">$84.17</div>
  <div class="I 10">$92.52</div>
  <div class="J 1">$25.00</div>
  <div class="J 2">$28.61</div>
  <div class="J 3">$32.42</div>
  <div class="J 4">$36.14</div>
  <div class="J 5">$37.79</div>
  <div class="J 6">$39.61</div>
  <div class="J 7">$41.07</div>
  <div class="J 8">$42.54</div>
  <div class="J 9">$44.04</div>
  <div class="J 10">$45.52</div>
  <div class="K 1">$31.16</div>
  <div class="K 2">$37.91</div>
  <div class="K 3">$44.65</div>
  <div class="K 4">$51.52</div>
  <div class="K 5">$58.22</div>
  <div class="K 6">$64.73</div>
  <div class="K 7">$71.17</div>
  <div class="K 8">$77.61</div>
  <div class="K 9">$84.07</div>
  <div class="K 10">$90.48</div>
  <div class="L 1">$28.32</div>
  <div class="L 2">$33.10</div>
  <div class="L 3">$37.61</div>
  <div class="L 4">$42.12</div>
  <div class="L 5">$46.64</div>
  <div class="L 6">$50.24</div>
  <div class="L 7">$53.84</div>
  <div class="L 8">$57.44</div>
  <div class="L 9">$61.04</div>
  <div class="L 10">$64.64</div>
  <div class="M 1">$43.59</div>
  <div class="M 2">$51.57</div>
  <div class="M 3">$59.56</div>
  <div class="M 4">$67.38</div>
  <div class="M 5">$75.21</div>
  <div class="M 6">$80.11</div>
  <div class="M 7">$85.00</div>
  <div class="M 8">$89.91</div>
  <div class="M 9">$94.80</div>
  <div class="M 10">$99.71</div>
  <div class="P 1">$17.58</div>
  <div class="P 2">$19.12</div>
  <div class="P 3">$20.67</div>
  <div class="P 4">$22.23</div>
  <div class="P 5">$23.50</div>
  <div class="P 6">$24.74</div>
  <div class="P 7">$26.17</div>
  <div class="P 8">$27.58</div>
  <div class="P 9">$29.01</div>
  <div class="P 10">$30.43</div>


</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将其添加到CSS中，将这些div显示设置为默认隐藏。

div.A, .B, .C, .D, .E, .F, .G, .H1, .H2, .I, .J, .K, .L, .M, .P {
  display:none;
}

https://jsfiddle.net/doLy6yp9/2/