С выпадающим списком Показать только выбранные элементы Div, но показать все элементы Div, если не выбрана ни одна опция

Question

У меня есть веб-сайт, который я создаю, и я нашел здесь код, который смог мне помочь. Я смог настроить его так, как хотел, но теперь у меня возникли проблемы. Я просто хочу, чтобы на странице отображались все элементы div, когда не выбрано значение выпадающего списка. Вот мой код:

<style type="text/css">
websitesubmission {
display: block;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>

<script>
$('#category_faq').on('change', function () {
$('websitesubmission').hide();
$('websitesubmission.' + $(this).val()).show()
});
</script>

<select id="category_faq">
<option selected value="">Select An Option</option>
<option value="information">info</option>
<option value="news">news</option>
<option value="blog">blog</option>
</select>
<br/>
<websitesubmission class="information">info</websitesubmission> 
<websitesubmission class="news">news</websitesubmission>
<websitesubmission class="blog">blog</websitesubmission>

Вот рабочий JSFiddle: http://jsfiddle.net/fj07nnu3/105/

(ОБНОВЛЕНО, ЧТОБЫ ПОКАЗАТЬ РАБОЧЕЕ РЕШЕНИЕ)

Рабочий раствор от пользователя ниже находится здесь: http://jsfiddle.net/fj07nnu3/124/

Answer 1

Используя выделенный текст, вы можете сделать как

$('#category_faq').on('change', function () {
    if($(this).val() == "") {
        $('websitesubmission').show();
    } else {

       $('websitesubmission').hide();
       $('websitesubmission.' + $(this).val()).show()
   }
});

Answer 2

Просто отредактируйте свою функцию JQuery следующим образом:

$('#category_faq').on('change', function() {
  if ($(this).val() == "") {
    $('websitesubmission').show();
  } else {
    $('websitesubmission').hide();
    $('websitesubmission.' + $(this).val()).show()
  }
});

Идея проста: у вас есть первая опция выбора со значением "" (пусто), вы должны проверять изменение опции выбора каждый раз, если его значение равно "" или нет.

Answer 3

Наиболее правильным было бы проверить, является ли выбранный индекс первым (0), так как при этом значение отдельного option не будет иметь значения.

Начиная с jQuery 1.6 вы можете использовать его prop метод $(this).prop('selectedIndex')

Фрагмент стека

$('#category_faq').on('change', function () {
  if ($(this)[0].selectedIndex == 0) {
    $('websitesubmission').show();
  } else {
    $('websitesubmission').hide();
    $('websitesubmission.' + $(this).val()).show()
  }
});

websitesubmission {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="category_faq">
    <option selected value="">Select An Option</option>
    <option value="information">info</option>
    <option value="news">news</option>
    <option value="blog">blog</option>
</select>
<br/>
<websitesubmission class="information">info</websitesubmission> 
<websitesubmission class="news">news</websitesubmission>
<websitesubmission class="blog">blog</websitesubmission>

Answer 4

Пожалуйста, попробуйте ниже код:

$('#category_faq').on('change', function () {
    $('websitesubmission').hide();
    if($(this).val() != ""){
    $('websitesubmission.' + $(this).val()).show()
    }else{
    $('websitesubmission').show()
    }
});