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