show-hide based on select option jquery wordpress

WordPress runs jQuery in noConflict mode. This means that you have either have to use jQuery instead of $ or you can wrap the code:

jQuery(function($) {

    //jQuery code

});

The code at http://jsfiddle.net/FvMYz/3898/ should work and uses the noConflict mode of jQuery. See http://jsfiddle.net/FvMYz/3897/ for a wrapped version that allows you to use $. Both should work.

Where to save the code?

You should never store the script in functions.php. Instead, create assets/js/your-script.js in your theme folder and store the code there. Add the following in your functions.php:

function themeslug_enqueue_script() {
    wp_enqueue_script( 'my-js', get_stylesheet_directory_uri().'/assets/js/your-script.js', array( 'jquery' ) );
}

add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );

Reference: https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts
https://developer.wordpress.org/reference/functions/wp_enqueue_script/