在应用过滤器之前，我需要隐藏所有过滤器容器数据
I need to hide all filterContainer data before applying filter
SO 我为我正在开发的 Web 应用程序创建了一个简单的运输计算器。运费根据重量和目的地进行过滤。
如何在应用过滤器之前隐藏所有费率？
我还想在过滤国家/地区下拉列表的下拉列表中添加搜索。
下面的评论与我到目前为止所做的有小提琴联系。
提前谢谢你:)
像这样，首先隐藏容器，并在更改时显示结果。
检查以下代码片段
$('#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();
});
$('#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();
});<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>您可以将其添加到 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/
相关文章：
- 为什么我的d3.jsselectAll+过滤器没有过滤
- Angularjs-utils高亮过滤器在搜索时破坏应用程序
- Angular-表的多列过滤器
- 如何“;过滤器”;或者以其他方式重构该数据
- Angularjs通过过滤器获取indexOf
- ui网格日期单元格过滤器，过滤日期格式导致显示错误的日期
- 使用按钮的Angular UI网格过滤器
- KendoUI网格行过滤器，带有布尔值下拉列表
- 如何在angular.js中动态应用自定义过滤器
- 角度过滤器和ng点击不起作用
- SVG过滤器可以'不能在React中呈现
- 使用javascript或angularjs特定过滤器搜索字符串中第一个img标记的json值
- 在表单中创建一个黑名单过滤器以避免某些单词
- 如何应用带过滤器的ng if来过滤记录，并在同一页面中显示两个不同的视图
- 过滤器返回true或false
- angularjs ng基于点击时的数组值重复过滤器
- DC.js带过滤器的订购
- 使用angularjs内置过滤器过滤代码中的特定属性
- 让我自己的过滤器不工作
- 为什么过滤器隐藏所有的元素
