javascript - 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