With Dropdown Box Show Only Selected Div's But Show All Divs When No Option Is Selected

Question

I have a website im making and I found a code on here that was able to help me out. I was able to customize it the way I wanted but now im having issues. I simply want the page to display all divs when no dropdown box value is selected. Here is my code:

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

Here is the working JSFiddle: http://jsfiddle.net/fj07nnu3/105/

(UPDATED TO SHOW WORKING SOLUTION)

Working solution from user below is located here: http://jsfiddle.net/fj07nnu3/124/

Answer 1

Just edit your JQuery function like this:

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

The idea is simple, you have a the first select option with value "" (empty), you have to check everytime select's option change if its value is "" or not.

Answer 2

The most proper would likely be to check if the selected index is the first ( 0 ), as with it, the individual option 's value won't matter.

From jQuery 1.6 you should be able to use its prop method $(this).prop('selectedIndex')

Stack snippet

 $('#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 3

By making use of selected text you can do like

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

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

Answer 4

Please try below code:

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