Show Form Fields Based on Selected Option

How to show form input fields based on select value?

You have a few issues with your code:

you are missing an open quote on the id of the select element, so: <select name="dbType" id=dbType">

should be <select name="dbType" id="dbType">

$('this') should be $(this): there is no need for the quotes inside the paranthesis.
use .val() instead of .value() when you want to retrieve the value of an option
when u initialize "selection" do it with a var in front of it, unless you already have done it at the beggining of the function

try this:

   $('#dbType').on('change',function(){
        if( $(this).val()==="other"){
        $("#otherType").show()
        }
        else{
        $("#otherType").hide()
        }
    });

http://jsfiddle.net/ks6cv/

UPDATE for use with switch:

$('#dbType').on('change',function(){
     var selection = $(this).val();
    switch(selection){
    case "other":
    $("#otherType").show()
   break;
    default:
    $("#otherType").hide()
    }
});

UPDATE with links for jQuery and jQuery-UI:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌

How to show form input fields based on select value in html/JavaScript?

Modified Html as shown below:

<h3>Search by:</h3> 
<select name ="nameField" id="nameField">
    <option>Only FirstName</option>
    <option>Only LastName</option>
    <option>Or</option>
    <option>And</option>
</select>
<br><br>
First Name <input type="text" name="firstName" id="firstNameInput"/>
Last Name <input type="text" name="lastName" id="lastNameInput" />
<br><br>
<input type="submit"/>
<input type="reset"/>

Javascript code:

var nameField = document.getElementById("nameField");
var firstNameInput = document.getElementById("firstNameInput");
var lastNameInput = document.getElementById("lastNameInput");

nameField.addEventListener("change", function(){
  //Update this to your logic...
  if(nameField.value === "And"){
    firstNameInput.disabled = true;
    lastNameInput.disabled = true;
  }
});

But I think it would be easier if using JQuery to handle DOM update.

Show input field only if a specific option is selected

here you go:

function yesnoCheck(that) {    if (that.value == "other") {  alert("check");        document.getElementById("ifYes").style.display = "block";    } else {        document.getElementById("ifYes").style.display = "none";    }}

<select onchange="yesnoCheck(this);">    <option value="">Valitse automerkkisi</option>    <option value="lada">Lada</option>    <option value="mosse">Mosse</option>    <option value="volga">Volga</option>    <option value="vartburg">Vartburg</option>    <option value="other">Muu</option></select>
<div id="ifYes" style="display: none;">    <label for="car">Muu, mikä?</label> <input type="text" id="car" name="car" /><br /></div>

show / hide form fields based on a select option (dropdown)

I'd suggest using hide and show to set the display instead of using css. Additionally there is a syntax error on the following line.

if ($(this).val() == "SKATER" || "HOCKEY" || "HOCKEYA")

With the || you can essentially break this down into 3 separate statements.

if ($(this).val() == "SKATER")
if("HOCKEY")
if("HOCKEYA")

The 2nd and 3rd expressions are always true, you need to be comparing them to the value. (i.e. if($(this).val() == "SKATER" || $(this).val() == "HOCKEY" || $(this).val() == "HOCKEYA")).

I updated your 2nd JSFiddle to reflect these changes.