JQuery从下拉选择器隐藏和取消隐藏元素

Question

我有一组小表，每个小表都有一个唯一的ID和一个将它们加载为无显示的类。

然后我需要一个选择器，访问者可以选择一个国家，并且包含匹配运输方法的相关表格将删除隐藏的类。

我已经得到了基础知识，但jQuery为此阻止了我在我的路径。

 $(function(){ 
 
      // bind change event to select 
 
      $('#country_selector').on('change', function() { 
 
       var shippingMethod = $(this).val(); // get selected value 
 
       if (shippingMethod) { // 
 
        
 
       } 
 
       return false; 
 
      }); 
 
     });

table.load-hidden{ 
 

 
display:none; 
 
}

<select id="country_selector"> 
 
    <option value="" selected="selected">Select your Country</option> 
 
    <option value="australia-post-ground-parcel">Australia</option> 
 
    <option value="usps-first-class-mail-international">Canada</option> 
 
    <option value="australia-post-pack-and-track-international-parcel">New Zealand</option> 
 
    <option value="usps-priority-mail-plus-signature">United States</option> 
 
</select> 
 

 

 
<table id="usps-priority-mail-plus-signature" class="load-hidden"> 
 
    <tbody> 
 
    <tr class="first odd"> 
 
     <th class="label">Shipping Method</th> 
 
     <td class="data">USPS Priority Mail + Signature Required</td> 
 
    </tr> 
 
    <tr class="even"> 
 
     <th class="label">Estimated Delivery Time</th> 
 
     <td class="data">3 to 5 working days</td> 
 
    </tr> 
 
    <tr class="odd"> 
 
     <th class="label">Customs &amp; Import Fees</th> 
 
     <td class="data">Ground Shipped, No fees apply</td> 
 
    </tr> 
 
    <tr class="even"> 
 
     <th class="label">Shipped From</th> 
 
     <td class="data">United States, Philadelphia Depot</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 

 

 

 

 

 
<table id="usps-first-class-mail-international" class="load-hidden"> 
 
    <tbody> 
 
    <tr class="first odd"> 
 
     <th class="label">Shipping Method</th> 
 
     <td class="data">USPS First-Class Mail International</td> 
 
    </tr> 
 
    <tr class="even"> 
 
     <th class="label">Estimated Delivery Time</th> 
 
     <td class="data">10 to 15 working days</td> 
 
    </tr> 
 
    <tr class="odd"> 
 
     <th class="label">Customs &amp; Import Fees</th> 
 
     <td class="data">Customs &amp; import fees may apply</td> 
 
    </tr> 
 
    <tr class="even"> 
 
     <th class="label">Shipped From</th> 
 
     <td class="data">United States, Philadelphia Depot</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 

 

 

 

 

 

 

 

 

 
<table id="australia-post-ground-parcel" class="load-hidden"> 
 
    <tbody> 
 
    <tr class="first odd"> 
 
     <th class="label">Shipping Method</th> 
 
     <td class="data">Australia Post Ground Parcel</td> 
 
    </tr> 
 
    <tr class="even"> 
 
     <th class="label">Estimated Delivery Time</th> 
 
     <td class="data">3 to 5 working days</td> 
 
    </tr> 
 
    <tr class="odd"> 
 
     <th class="label">Customs &amp; Import Fees</th> 
 
     <td class="data">Ground Shipped, No fees apply</td> 
 
    </tr> 
 
    <tr class="even"> 
 
     <th class="label">Shipped From</th> 
 
     <td class="data">Australia, Sydney Depot</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<table id="australia-post-pack-and-track-international-parcel" class="load-hidden"> 
 
    <tbody> 
 
    <tr class="first odd"> 
 
     <th class="label">Shipping Method</th> 
 
     <td class="data">Australia Post Pack and Track International Parcel</td> 
 
    </tr> 
 
    <tr class="even"> 
 
     <th class="label">Estimated Delivery Time</th> 
 
     <td class="data">10 to 15 working days</td> 
 
    </tr> 
 
    <tr class="odd"> 
 
     <th class="label">Customs &amp; Import Fees</th> 
 
     <td class="data">Customs &amp; import fees may apply</td> 
 
    </tr> 
 
    <tr class="even"> 
 
     <th class="label">Shipped From</th> 
 
     <td class="data">Australia, Sydney Depot</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 

 

 

 

 

 

 

 

 

 
<table id="royal-mail-first-class-packet-signed-for" class="load-hidden"> 
 
    <tbody> 
 
    <tr class="first odd"> 
 
     <th class="label">Shipping Method</th> 
 
     <td class="data">Royal Mail First Class Packet Signed For</td> 
 
    </tr> 
 
    <tr class="even"> 
 
     <th class="label">Estimated Delivery Time</th> 
 
     <td class="data">10 to 15 working days</td> 
 
    </tr> 
 
    <tr class="odd"> 
 
     <th class="label">Customs &amp; Import Fees</th> 
 
     <td class="data">Ground Shipped, No fees apply</td> 
 
    </tr> 
 
    <tr class="even"> 
 
     <th class="label">Shipped From</th> 
 
     <td class="data">United Kingdom, London Depot</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<table id="royal-mail-international-standard" class="load-hidden"> 
 
    <tbody> 
 
    <tr class="first odd"> 
 
     <th class="label">Shipping Method</th> 
 
     <td class="data">Royal Mail International Standard</td> 
 
    </tr> 
 
    <tr class="even"> 
 
     <th class="label">Estimated Delivery Time</th> 
 
     <td class="data">10 to 15 working days</td> 
 
    </tr> 
 
    <tr class="odd"> 
 
     <th class="label">Customs &amp; Import Fees</th> 
 
     <td class="data"><b>EU based Customers:</b> No Customs Fees apply 
 
     <br /><b>Customers Outside EU:</b> Customs &amp; import fees may apply 
 
     </td> 
 
    </tr> 
 
    <tr class="even"> 
 
     <th class="label">Shipped From</th> 
 
     <td class="data">United Kingdom, London Depot</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<table id="royal-mail-international-tracked" class="load-hidden"> 
 
    <tbody> 
 
    <tr class="first odd"> 
 
     <th class="label">Shipping Method</th> 
 
     <td class="data">Royal Mail International Tracked</td> 
 
    </tr> 
 
    <tr class="even"> 
 
     <th class="label">Estimated Delivery Time</th> 
 
     <td class="data">10 to 15 working days</td> 
 
    </tr> 
 
    <tr class="odd"> 
 
     <th class="label">Customs &amp; Import Fees</th> 
 
     <td class="data"><b>EU based Customers:</b> No Customs Fees apply 
 
     <br /><b>Customers Outside EU:</b> Customs &amp; import fees may apply 
 
     </td> 
 
    </tr> 
 
    <tr class="even"> 
 
     <th class="label">Shipped From</th> 
 
     <td class="data">United Kingdom, London Depot</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<table id="royal-mail-international-signed-for" class="load-hidden"> 
 
    <tbody> 
 
    <tr class="first odd"> 
 
     <th class="label">Shipping Method</th> 
 
     <td class="data">Royal Mail International Signed For</td> 
 
    </tr> 
 
    <tr class="even"> 
 
     <th class="label">Estimated Delivery Time</th> 
 
     <td class="data">10 to 15 working days</td> 
 
    </tr> 
 
    <tr class="odd"> 
 
     <th class="label">Customs &amp; Import Fees</th> 
 
     <td class="data"><b>EU based Customers:</b> No Customs Fees apply 
 
     <br /><b>Customers Outside EU:</b> Customs &amp; import fees may apply 
 
     </td> 
 
    </tr> 
 
    <tr class="even"> 
 
     <th class="label">Shipped From</th> 
 
     <td class="data">United Kingdom, London Depot</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

应该直截了当的选项值匹配ID的

$(function() { 
    $('#country_selector').on('change', function() { 
     $('.load-hidden').hide(); 
     $('#' + this.value).show(); 
    }); 
}); 

FIDDLE