Develop Reference

How to use jQuery hide and show effect when using select option

i got one more doubt im close to the answer but not getting it to worked, Actually i have the a default input text & default drop-down(drop-down which consist of west Bengal & others). NOW if some one click's on the west Bengal state under drop-down then the default input should get hide and the west Bengal drop-down should get displayed.Below is the code what i have tried.can any one please guideme a bit new to jQuery.
thanks!!
<div class="col-sm-4">
<div class="form-group">
<select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
<option value="" disabled="" selected="">Select State</option>
<option value="WestBengal">West Bengal</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group otherdistricts">
<input class="form-control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District" autocomplete="false">
</div>
<div class="westbengaldistrict" style="display:none">
<select class="form-control" name="district" id="district" autocomplete="false">
<option value="" selected disabled>Select Your District</option>
<option value="Alipurduar">Alipurduar</option>
<option value="Bankura">Bankura</option>
<option value="PaschimBardhaman">Paschim Bardhaman</option>
<option value="PurbaBardhaman">Purba Bardhaman</option>
<option value="Birbhum">Birbhum</option>
<option value="CoochBehar">Cooch Behar</option>
<option value="Darjeeling">Darjeeling</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="DakshinDinajpur">Dakshin Dinajpur</option>
<option value="Hooghly">Hooghly</option>
<option value="Howrah">Howrah</option>
<option value="Jalpaiguri">Jalpaiguri</option>
<option value="Jhargram">Jhargram</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="Kalimpong">Kalimpong</option>
<option value="Malda">Malda</option>
<option value="PaschimMedinipur">Paschim Medinipur</option>
<option value="PurbaMedinipur">Purba Medinipur</option>
<option value="Murshidabad">Murshidabad</option>
<option value="Nadia">Nadia</option>
<option value="North24Parganas">North 24 Parganas</option>
<option value="South24Parganas">South 24 Parganas</option>
<option value="Purulia">Purulia</option>
</select>
</div>
</div>
<script>
$(document).ready(function(){
$("#state").on("select",function() {
if ($(this).val() === "WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}
});
});
</script>

You have errors in the jquery code. Use the below code, it is working fine and tested.
<script>
$(document).ready(function(){
$("select").change(function(){
$( "select option:selected").each(function(){
//enter bengal districts
if($(this).attr("value")=="WestBengal"){
$(".enterotherstates").hide();
$(".enterbengaldistricts").show();
}
//enter other states
if($(this).attr("value")=="Others"){
$(".enterbengaldistricts").hide();
$(".enterotherstates").show();
}
});
});
});
</script>

Your closing parentheses and brackets are the other way around in your javaScript code.
Should be like this
$(document).ready(function () { code here });
But you have
$(document).ready(function () { code here )};
Try this
<script>
$(document).ready(function () {
$("select").change(function () {
$("select option:selected").each(function () {
//enter bengal districts
if ($(this).attr("value") == "WestBengal") {
$(".enterotherstates").hide();
$(".enterbengaldistricts").show();
}
//enter other states
if ($(this).attr("value") == "Others") {
$(".enterbengaldistricts").hide();
$(".enterotherstates").show();
}
});
});
});
</script>

$(document).ready(function () {
$("select").change(function () {
if ($(this).val() === "WestBengal") {
$(".enterotherstates").hide();
$(".enterbengaldistricts").show();
}
else {
$(".enterbengaldistricts").hide();
$(".enterotherstates").show();
}
});
});
Your code has error. Your code is:
$(document).ready(function())};
Change to:
$(document).ready(function()});
Since select is a form element you can right use val() method instead of $(this).attr("value") to get value.

You have several issues in your code. First of all, your closing brackets are wrong. You should have )}; instead of });
Your inputfield has display: none, you should remove that, because $(".enterotherstates").show(); won't let it appear, only the parent element.
Next, you don't need to iterate with each. It's easier and faster to use $(this).
$(document).ready(function() {
$("select").change(function() {
if ($(this).val() === "WestBengal") {
$(".enterotherstates").hide();
$(".enterbengaldistricts").show();
} else {
$(".enterbengaldistricts").hide();
$(".enterotherstates").show();
}
});
});
Optional performance advice
you could make your code faster by caching your jQuery objects and reuse them. So the browser doesn't have to search the complete HTML again and again:
$(document).ready(function() {
var otherStates = $(".enterotherstates");
var bengal = $(".enterbengaldistricts");
$("select").change(function() {
if ($(this).val() === "WestBengal") {
otherStates.hide();
bengal.show();
} else {
bengal.hide();
otherStates.show();
}
});
});

answer to your updated question
$(document).ready(function(){
$(".westbengaldistrict").hide(); // first hide the select
$("#state").on("change",function() {
if ($(this).val() === "WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show(); // show on change
}
});
});

Below is the updated jquery code as per the updated question. It is working fine and tested.
$(document).ready(function(){
$("#state").change(function() {
if ($(this).val() === "WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}else{
$(".otherdistricts").show();
$(".westbengaldistrict").hide();
}
});
});

Hide div when dropdown value is 0

I have a formula page where the dropdowns has a default value = 0.
I would like it to hide a div when the value is = 0, even when the page is loaded.
I believe i should use javascript, but should i use jQuery?
i tried with and without jQuery, but couldn't get my code to work.
This is the dropdown
<select class="products-dropdown" name="lease-product" id="sel-lease-product" onchange="hideDiv">
<option value="0"><?php _e('Select product', 'wp-woo-leasing'); ?></option>
This is the div i want to hide.
<div id="product-description" class="product-description"></div>
i tried this JS
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#sel-lease-product").change(function() {
if(jQuery(this).find("option:selected").val() == 0) {
jQuery(".product-description").hide();
}
});
});
</script>
and JS
function hideDiv(elem) {
if(elem.value == 0){
document.getElementById("product-description").style.display = "none";
} }
My whole code looks like this http://pastebin.com/WTFu3Hte
what am i doing wrong?

Try this code:
$(document).ready(function() {
$("#sel-lease-product").change(function() {
if($(this).val() === "0") {
$(".product-description").hide();
}else{
$(".product-description").show();
}
});
$("#sel-lease-product").change();
});
If you want execute the code when the page is load remember to run the event change your select
Result: https://jsfiddle.net/cmedina/mwz5udwz/

Invoke the change handler initially to achieve expected results on page load using jQuery.change().
jQuery.toggle could be used instead of using both jQuery.show and jQuery.hide
Note: Use either of JavaScript or jQuery, do not use them together!
$(document).ready(function() {
$("#sel-lease-product").change(function() {
$(".product-description").toggle(this.value != 0);
}).change();
//-^^^^^^^^
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select class="products-dropdown" name="lease-product" id="sel-lease-product">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div class="product-description">Content here....</div>

If you need to check the onchange() value that is from the select tag you can prefer two methods
Directly write the onchange() function to the select tag itself
Invoke the function with the help if select ID so that you can write the on change over to the script itself.
Method One:
HTML:
<select class="products-dropdown" name="lease-product" id="sel-lease-product" onchange="hide_function(this.value);">
<option value="">Please Select</option>
<option value="0">Zero</option>
<option value="1">One</option>
</select>
<div id="product-description" class="product-description">product-description</div>
JS:
function hide_function(a)
{
if(a=='0')
{
$('#product-description').hide();
}
else
{
$('#product-description').show();
}
}
Method Two:
Directly calling the on change function in the script file itself.
$(document).ready(function() {
$("#sel-lease-product").change(function() {
if($(this).val() === "0") {
$(".product-description").hide();
}else{
$(".product-description").show();
}
});
$("#sel-lease-product").change(); //Again invoking the change function on-load of the page
});

$(document).ready(function() {
$("#sel-lease-product").change(function() {
if($(this).val() == 0) {
$(".product-description").hide();
}else{
$(".product-description").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="products-dropdown" name="lease-product" id="sel-lease-product">
<option value="">select</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
<div id="product-description" class="product-description">Hide if 0</div>

Well your code will never reshow the value so you need to do if/else type of check. The nice thing is jQuery has it built in so you can just call toggle with a boolean.
Also there is not need to look for the selected option, val() will do that for you. And to make sure the element is in the correct state when the page loads, you want to trigger the change event.
$("#sel-lease-product").on("change", function() {
$(".product-description").toggle($(this).val() !== "0");
}).trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="sel-lease-product">
<option value="0">Pick</option>
<option value="1">FOO</option>
</select>
<div class="product-description">Description</div>

Try this :
$(document).ready(function() {
$("#sel-lease-product").on("change",function(){
if($(this).val() == 0) {
$(".product-description").hide();
}
}).change();
})
<select class="products-dropdown" name="lease-product" id="sel-lease-product">
<option value="1">1</option>
<option value="0">0</option>
</select>
<div id="product-description" class="product-description">product-description</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Hide div after selecting option in select tag

I have three options in a select. I want that when I select optionB, a div with an id of demo should be hidden. How can I do that?
$(document).ready(function() {
$('#selectOption').select(function() {
var ab = $('#selectOption').val();
if (ab == 'optionB') {
$("#demo").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='selectOption'>
<option>--select</option>
<option value='optionA'>optionA</option>
<option value='optionB'>optionB</option>
</select>
<div id='demo'>xyz</div>
Thanks in advance.

Change the "select" event for the "change" event.
$(document).ready(function() {
$('#selectOption').on("change", function() {
var ab = $('#selectOption').val();
if (ab == 'optionB') {
$("#demo").hide();
} else {
$("#demo").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='selectOption'>
<option>--select</option>
<option value='optionA'>optionA</option>
<option value='optionB'>optionB</option>
</select>
<div id='demo'>xyz</div>

Try this :
$(document).ready(function() {
$("#selectOption").on("change",function(){
if($(this).val() == "optionB" )
$("#demo").hide(1000);
})
})
<select id='selectOption'>
<option>--select</option>
<option value='optionA'>optionA</option>
<option value='optionB'>optionB</option>
</select>
<div id='demo'>xyz</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Drop-down box dependent on the option selected in another drop-down box

I have 2 different SELECT OPTION in a form.
The first one is Source, the second one is Status. I would like to have different OPTIONS in my Status drop-down list depending on the OPTION selected in my Source drop-down.
Source:
<select id="source" name="source">
<option>MANUAL</option>
<option>ONLINE</option>
</select>
Status:
<select id="status" name="status">
</select>
Options:
- If Source is MANUAL, then Status is OPEN or DELIVERED
- If Source is ONLINE, then Status is OPEN or DELIVERED or SHIPPED
My non-working attempt:
<script>
$(document).ready(function () {
var option = document.getElementById("status").options;
if (document.getElementById('source').value == "MANUAL") {
$("#status").append('<option>OPEN</option>');
$("#status").append('<option>DELIVERED</option>');
}
if (document.getElementById('source').value == "ONLINE") {
$("#status").append('<option>OPEN</option>');
$("#status").append('<option>DELIVERED</option>');
$("#status").append('<option>SHIPPED</option>');
}
});
</script>

Try something like this... jsfiddle demo
HTML
<!-- Source: -->
<select id="source" name="source">
<option>MANUAL</option>
<option>ONLINE</option>
</select>
<!-- Status: -->
<select id="status" name="status">
<option>OPEN</option>
<option>DELIVERED</option>
</select>
JS
$(document).on('ready', function () {
$("#source").on('change', function () {
var el = $(this);
if (el.val() === "ONLINE") {
$("#status").append("<option>SHIPPED</option>");
} else if (el.val() === "MANUAL") {
$("#status option:last-child").remove();
}
});
});

I am posting this answer because in this way you will never need any plugin like jQuery and any other, This has the solution by simple javascript.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
function dynamicdropdown(listindex)
{
switch (listindex)
{
case "manual" :
document.getElementById("status").options[0]=new Option("Select status","");
document.getElementById("status").options[1]=new Option("OPEN","open");
document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
break;
case "online" :
document.getElementById("status").options[0]=new Option("Select status","");
document.getElementById("status").options[1]=new Option("OPEN","open");
document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
document.getElementById("status").options[3]=new Option("SHIPPED","shipped");
break;
}
return true;
}
</script>
</head>
<title>Dynamic Drop Down List</title>
<body>
<div class="category_div" id="category_div">Source:
<select id="source" name="source" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
<option value="">Select source</option>
<option value="manual">MANUAL</option>
<option value="online">ONLINE</option>
</select>
</div>
<div class="sub_category_div" id="sub_category_div">Status:
<script type="text/javascript" language="JavaScript">
document.write('<select name="status" id="status"><option value="">Select status</option></select>')
</script>
<noscript>
<select id="status" name="status">
<option value="open">OPEN</option>
<option value="delivered">DELIVERED</option>
</select>
</noscript>
</div>
</body>
</html>
For more details, I mean to make dynamic and more dependency please take a look at my article create dynamic drop-down list

function dropdownlist(listindex)
{
document.getElementById("ddlCity").options.length = 0;
switch (listindex)
{
case "Karnataka":
document.getElementById("ddlCity").options[0] = new Option("--select--", "");
document.getElementById("ddlCity").options[1] = new Option("Dharawad", "Dharawad");
document.getElementById("ddlCity").options[2] = new Option("Haveri", "Haveri");
document.getElementById("ddlCity").options[3] = new Option("Belgum", "Belgum");
document.getElementById("ddlCity").options[4] = new Option("Bijapur", "Bijapur");
break;
case "Tamilnadu":
document.getElementById("ddlCity").options[0] = new Option("--select--", "");
document.getElementById("ddlCity").options[1] = new Option("dgdf", "dgdf");
document.getElementById("ddlCity").options[2] = new Option("gffd", "gffd");
break;
}
}
*
State:
--Select--
Karnataka
Tamilnadu
Andra pradesh
Telngana
<div>
<p>
<label id="lblCt">
<span class="red">*</span>
City:</label>
<select id="ddlCity">
<!-- <option>--Select--</option>
<option value="1">Dharawad</option>
<option value="2">Belgum</option>
<option value="3">Bagalkot</option>
<option value="4">Haveri</option>
<option>Hydrabadh</option>
<option>Vijat vada</option>-->
</select>
<label id="lblCity"></label>
</p>
</div>

In this jsfiddle you'll find a solution I deviced. The idea is to have a selector pair in html and use (plain) javascript to filter the options in the dependent selector, based on the selected option of the first. For example:
<select id="continents">
<option value = 0>All</option>
<option value = 1>Asia</option>
<option value = 2>Europe</option>
<option value = 3>Africa</option>
</select>
<select id="selectcountries"></select>
Uses (in the jsFiddle)
MAIN.createRelatedSelector
( document.querySelector('#continents') // from select element
,document.querySelector('#selectcountries') // to select element
,{ // values object
Asia: ['China','Japan','North Korea',
'South Korea','India','Malaysia',
'Uzbekistan'],
Europe: ['France','Belgium','Spain','Netherlands','Sweden','Germany'],
Africa: ['Mali','Namibia','Botswana','Zimbabwe','Burkina Faso','Burundi']
}
,function(a,b){return a>b ? 1 : a<b ? -1 : 0;} // sort method
);
[Edit 2021] or use data-attributes, something like:
document.addEventListener("change", checkSelect);
function checkSelect(evt) {
const origin = evt.target;
if (origin.dataset.dependentSelector) {
const selectedOptFrom = origin.querySelector("option:checked")
.dataset.dependentOpt || "n/a";
const addRemove = optData => (optData || "") === selectedOptFrom
? "add" : "remove";
document.querySelectorAll(`${origin.dataset.dependentSelector} option`)
.forEach( opt =>
opt.classList[addRemove(opt.dataset.fromDependent)]("display") );
}
}
[data-from-dependent] {
display: none;
}
[data-from-dependent].display {
display: initial;
}
<select id="source" name="source" data-dependent-selector="#status">
<option>MANUAL</option>
<option data-dependent-opt="ONLINE">ONLINE</option>
<option data-dependent-opt="UNKNOWN">UNKNOWN</option>
</select>
<select id="status" name="status">
<option>OPEN</option>
<option>DELIVERED</option>
<option data-from-dependent="ONLINE">SHIPPED</option>
<option data-from-dependent="UNKNOWN">SHOULD SELECT</option>
<option data-from-dependent="UNKNOWN">MAYBE IN TRANSIT</option>
</select>

You're better off making two selects and showing one while hiding the other.
It's easier, and adding options to selects with your method will not work in IE8 (if you care).

I hope the following code will help or solve your problem or you think not that understandable visit http://phppot.com/jquery/jquery-dependent-dropdown-list-countries-and-states/.
HTML DYNAMIC DEPENDENT SELECT
<div class="frmDronpDown">
<div class="row">
<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value="">Select Country</option>
<?php
foreach($results as $country) {
?>
<option value="<?php echo $country["id"]; ?>"><?php echo $country["name"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="row">
<label>State:</label><br/>
<select name="state" id="state-list" class="demoInputBox">
<option value="">Select State</option>
</select>
</div>
GETTING STATES VIA AJAX
<script> function getState(val) { $.ajax({
type: "POST",
url: "get_state.php",
data:'country_id='+val,
success: function(data){
$("#state-list").html(data);
}
});} </script>
READ STATE DATABASE USING PHP
<?php require_once("dbcontroller.php"); $db_handle = new DBController();if(!empty($_POST["country_id"])) {
$query ="SELECT * FROM states WHERE countryID = '" . $_POST["country_id"] . "'";
$results = $db_handle->runQuery($query); ?> <option value="">Select State</option><?php foreach($results as $state) { ?> <option value="<?php echo $state["id"]; ?>"><?php echo $state["name"]; ?></option><?php } } ?>

for this, I have noticed that it far better to show and hide the tags instead of adding and removing them for the DOM. It performs better that way.

The answer should be updated to replace the defunct functions .change & .ready
$(document).on('ready',function() {
$("#source").on('change', function(){
var el = $(this);
if (el.val() === "ONLINE") {
$("#status").append("<option>SHIPPED</option>");
} else if (el.val() === "MANUAL") {
$("#status option:last-child").remove();
}
});
});

How to show form input fields based on select value?

I know this is simple, and I need to search in Google. I tried my best and I could not find a better solution. I have a form field, which takes some input and a select field, which has some values. It also has "Other" value.
What I want is:
If the user selects the 'Other' option, a text field to specify that 'Other' should be displayed. When a user selects another option (than 'Other') I want to hide it again. How can I perform that using JQuery?
This is my JSP code
<label for="db">Choose type</label>
<select name="dbType" id=dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
<div id="otherType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>
Now I want to show the DIV tag**(id="otherType")** only when the user selects Other.
I want to try JQuery. This is the code I tried
<script type="text/javascript"
src="jquery-ui-1.10.0/tests/jquery-1.9.0.js"></script>
<script src="jquery-ui-1.10.0/ui/jquery-ui.js"></script>
<script>
$('#dbType').change(function(){
selection = $('this').value();
switch(selection)
{
case 'other':
$('#otherType').show();
break;
case 'default':
$('#otherType').hide();
break;
}
});
</script>
But I am not able to get this. What should I do? Thanks

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

Demo on JSFiddle
$(document).ready(function () {
toggleFields(); // call this first so we start out with the correct visibility depending on the selected form values
// this will call our toggleFields function every time the selection value of our other field changes
$("#dbType").change(function () {
toggleFields();
});
});
// this toggles the visibility of other server
function toggleFields() {
if ($("#dbType").val() === "other")
$("#otherServer").show();
else
$("#otherServer").hide();
}
HTML:
<p>Choose type</p>
<p>Server:
<select id="dbType" name="dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
</p>
<div id="otherServer">
<p>Server:
<input type="text" name="server_name" />
</p>
<p>Port:
<input type="text" name="port_no" />
</p>
</div>
<p align="center">
<input type="submit" value="Submit!" />
</p>

You have to use val() instead of value() and you have missed starting quote id=dbType" should be id="dbType"
Live Demo
Change
selection = $('this').value();
To
selection = $(this).val();
or
selection = this.value;

I got its answer. Here is my code
<label for="db">Choose type</label>
<select name="dbType" id=dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
<div id="other" class="selectDBType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>
And my script is
$(function() {
$('#dbType').change(function() {
$('.selectDBType').slideUp("slow");
$('#' + $(this).val()).slideDown("slow");
});
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myfun(){
$(document).ready(function(){
$("#select").click(
function(){
var data=$("#select").val();
$("#disp").val(data);
});
});
}
</script>
</head>
<body>
<p>id <input type="text" name="user" id="disp"></p>
<select id="select" onclick="myfun()">
<option name="1"value="1">first</option>
<option name="2"value="2">second</option>
</select>
</body>
</html>

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