Javascript，淡出非选择div类

Question

以下是我的 html:

 <div class="col-md-2">
                                <select class=" form-control" title="Dropdown" id="country-change">
                                    <option value="all">All Countries</option>
                                    <option value="US">US</option>
                                    <option value="UK">UK</option> 
                                    <option value="USSR">USSR</option> 
                                </select>

                            </div>

<div class="col-md-12 country-<%=product.country%>">
                                        <div class="col-md-3">
                                            <a href="<%= edit_product_path product %>" class="thumbnail">
                                                <% if product.product_overview_url.present? %>
                                                    <img src="<%= product.product_overview_url %>" alt="...">
                                                <% else %>
                                                    <img src="<%= asset_url('placehold_200_200.png') %>" alt="...">
                                                <% end %>
                                            </a>
                                        </div>

                                        <div class="col-md-6">
                                            <h5><%= product.name %>, for traveller in <%= product.city %></h5>
                                            <a href="/products/<%= product.id %>/edit"><i class="fa fa-cog fa-fw"></i> Manage Listing and Price</a>
                                            <br>
                                            <a href="/products/<%= product.slug %>" target="_blank"><i class="fa fa-eye fa-fw"></i> Preview Listing</a>
                                        </div>

                                        <div class="col-md-3">

                                            <select class=" form-control <%= product.status %> product-status" title="Dropdown" id="status-change" product-id="<%= product.id %>">
                                                <option value="enable" <%= 'selected' if product.status == 'enable' %>>Listed</option>
                                                <option value="disable" <%= 'selected' if product.status == 'disable' %>>Unlisted</option>
                                            </select>

                                        </div>
                                    </div>

div所在的国家/地区属于country-<%= product.country%>代表，其中我将得到如下结果:

<div class="col-md-12 country-UK">...</div>
<div class="col-md-12 country-US">...</div>
<div class="col-md-12 country-US">...</div>
<div class="col-md-12 country-USSR">...</div>

选中需要显示的国家时，如何隐藏未选中的国家？

$('#country-change').on('change', function(){
            var listed_country = $(this).val();
            $('.country-'+listed_country).fadeOut('slow');
        })

上面的代码隐藏了选中的那个。我怎样才能显示选中的一个并隐藏所有未选中的？谢谢

Answer 1

给所有的div添加一个额外的class

<div class="col-md-12 country country-UK">...</div>
<div class="col-md-12 country country-US">...</div>
<div class="col-md-12 country country-US">...</div>
<div class="col-md-12 country country-USSR">...</div>

然后隐藏除所选元素之外的所有国家/地区 div 元素

$('#country-change').on('change', function(){
    var listed_country = $(this).val();
    var $c = $('.country-'+listed_country).fadeIn('slow');
    $('div.country').not($c).fadeOut('slow');
})

$('#country-change').on('change', function() {
  var listed_country = $(this).val();
  if (listed_country == 'All') {
    $('div.country').stop(true).fadeIn('slow');
  } else {
    var $c = $('.country-' + listed_country).stop(true).fadeIn('slow');
    $('div.country').not($c).stop(true).fadeOut('slow');
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country-change">
  <option>All</option>
  <option>UK</option>
  <option>US</option>
  <option>FR</option>
  <option>USSR</option>
</select>

<div class="col-md-12 country country-UK">UK</div>
<div class="col-md-12 country country-US">US</div>
<div class="col-md-12 country country-FR">FR</div>
<div class="col-md-12 country country-USSR">USSR</div>