Показать / скрыть на основе раскрывающегося списка

Создайте набор элементов, которые вы хотите показать / скрыть:

var elements = $('[data-show], [data-hide]');

Затем вы можете использовать функцию jQuery .filter, чтобы показать только выбранный элемент:

var elements = $('[data-show], [data-hide]');    

function showElement(option) {  
  var filter;  
  
  // hide all elements befor filtering
  elements.hide();
  
  // create the filter value, which will be used for filtering
  switch (option) {
    case 'test':
      filter = '[data-hide = "example"]';
      console.info('show only example');
      break;
    
    case 'blah':
      filter = '*';
      console.info('show all elements');
      break;
      
    default:
      console.info('hide all elements (including example)');
      break;
  }  
  
  if (filter) {
    elements.filter(filter).show(); 
  }
}

showElement('test');

$("select").on("change", function() {
  showElement($(this).val());  
})

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value='test'>Test</option>
  <option value='example'>Example</option>
  <option value='blah'>Blah</option>
</select>
<div data-show = "blah">Should be shown when blah</div>
<div data-hide = "example">Should be hidden when example</div>

Также у вас было несколько опечатки:

• Когда вы выбираете элемент через data-hide, появляется дополнительный s (hides):

  hides = $('[data-hides = "' + $(this).val() + '"]')
  

• Если вы хотите скрыть hides с помощью вызова .hides(), jQuery имеет только функцию .hide(), чтобы скрыть элемент:

  hides.hides()
  

Можно использовать filter() для настройки окончательного отображения и сделать обратное для всей группы перед фильтром.

$("select").on("change", function(){
  var value = this.value
  // hide all data-show
  $('[data-show]').hide().filter(function(){
     return $(this).data('show') === value;
  }).show()// only show matching ones
  
 $('[data-hide]').show().filter(function(){
     return $(this).data('hide') === value;
  }).hide()

}).change()

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
   <option value='test'>Test</option>
   <option value='example'>Example</option>
   <option value='blah'>Blah</option>
</select>
<div data-show = "blah">Should be shown when blah</div>
<div data-hide = "example">Should be hidden when example</div>

Я не знаю, чем вы занимаетесь, но это описанное поведение, вероятно, не желаемое: D

$('select').on('change', (e) => {
  // apply defaults, then filter // credits to filter @charlietfl
  $('[data-show]').hide().filter('[data-show=' + $(e.target).val() + ']').show();
  $('[data-hide]').show().filter('[data-hide=' + $(e.target).val() + ']').hide();
}).change();

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
   <option value='test'>Test</option>
   <option value='example'>Example</option>
   <option value='blah'>Blah</option>
</select>
<div data-show = "blah">Should be shown when blah</div>
<div data-hide = "example">Should be hidden when example</div>

РЕДАКТИРОВАТЬ добавлено скрытие / отображение по умолчанию

<select class = "selectBoxClass">
    <option value='test'>Test</option>
    <option value='example'>Example</option>
    <option value='blah'>Blah</option>
</select>
<div data-show = "blah" class = "all ">Should be shown when blah</div>
<div data-hide = "example" class = "all">Should be hidden when example</div>

<script>
    $(document).on('change', '.selectBoxClass', function(event) {
        event.preventDefault();
        $('div.all').show();
        shows = $('[data-show = "' + $(this).val() + '"]')
        hides = $('[data-hides = "' + $(this).val() + '"]')
        shows.show()
        hides.hides()
    });

</script>

** если ваш предыдущий код не работает должным образом, вы можете попробовать это.

Предположим, вы предполагаете набор div, некоторые из которых вы хотите показать / скрыть в зависимости от того, что вы выбрали в раскрывающемся списке в jQuery.

Вот как этого можно достичь.

Сетки

<div class = "row exhbitors-grid-row">
                            
    <div class = "col-lg-6 col-md-6 exhibitor-grid-item" style = "">
        <div class = "exhibitor-grid-large wow pixFadeRight" data-wow-delay = "0.5s" style = "visibility: visible; animation-delay: 0.5s; animation-name: pixFadeRight;">
            <div class = "member-avater">
                <img src = "#" alt = "">
            </div>
            <div class = "listing-page-exhibitor-brief wow pixFadeUp" style = "visibility: visible; animation-name: pixFadeUp;">
                <div class = "exhibitor-details">
                    <input type = "hidden" name = "industry" class = "industry Accommodation" value = "Accommodation">
                    <h4 class = "grid-exhibitor-title">Tourist Board</h4>
                    <strong class = "grid-exhibitor-copy">Manning the Booth</strong>
                    <div class = "grid-item-host">
                        <span>User</span>
                        <a href = "bcard.pdf" target = "_blank" title = "Download business card"><i class = "fa fa-address-card b-card-file" aria-hidden = "true"></i>
                        </a> 
                    </div>
                </div>
            </div>
        </div>
    </div>
                
    <div class = "col-lg-6 col-md-6 exhibitor-grid-item" style = "">
        <div class = "exhibitor-grid-large wow pixFadeRight" data-wow-delay = "0.5s" style = "visibility: visible; animation-delay: 0.5s; animation-name: pixFadeRight;">
            <div class = "member-avater">
                <img src = "#" alt = "">
            </div>
            <div class = "listing-page-exhibitor-brief wow pixFadeUp" style = "visibility: visible; animation-name: pixFadeUp;">
                <div class = "exhibitor-details">
                    <input type = "hidden" name = "industry" class = "industry Airline" value = "Airline">
                    <h4 class = "grid-exhibitor-title">Tourist Board</h4>
                    <strong class = "grid-exhibitor-copy">Manning the Booth</strong>
                    <div class = "grid-item-host">
                        <span>User</span>
                        <a href = "bcard.pdf" target = "_blank" title = "Download business card"><i class = "fa fa-address-card b-card-file" aria-hidden = "true"></i>
                        </a> 
                    </div>
                </div>
            </div>
        </div>
    </div>
    ...
    ...
    ...
    
</div>

Где-то на странице у вас есть выпадающий список, который выглядит следующим образом:

<select class = "category-select" name = "category-select" id = "category-select">
    <option value = "-1">Industry </option>
    <option value = "1">Accommodation</option>
    <option value = "2">Airline</option>
    <option value = "3">Car Rentals</option>
    <option value = "4">City Tourist Board</option>
    ...
    ...
    ...
</select>

При изменении этого раскрывающегося списка мы хотим отображать только тот div, значение значения скрытого поля которого совпадает с выбранным элементом раскрывающегося списка. Проверьте значения скрытых полей выше в div.

Нам понадобится немного jQuery, чтобы творить чудеса. Вот как это будет выглядеть:

$(document).ready(function(){
if ($(".category-select")){
$(".category-select").change(function(){
    $(".exhibitor-grid-item").show();
    var selectedIndustry = $(".category-select option:selected").text();
    $(".exhibitor-grid-item").each(function(){
        var $itemIndustry = $(this).find(".industry").val();
        if ($(".category-select option:selected").val() > -1){
          if (selectedIndustry != $itemIndustry){
            $(this).find(".industry").parent().parent().parent().parent().hide();
          }
        }
     });
   });
 }
});