jQuery seleccionar cambio mostrar / ocultar evento div

Estoy intentando crear un formulario que, cuando se seleccione el elemento ‘parcel’, mostrará un div pero, cuando no esté seleccionado, me gustaría ocultar el div. Aquí está mi marcado en este momento:

Este es mi HTML hasta ahora …

Type Large Letter Letter Parcel
Dimensions

Este es mi jQuery hasta ahora …

  $(function() { $('#type').change(function(){ $('#row_dim').hide(); $("select[@name='parcel']:checked").val() == 'parcel').show(); }); }); 

Use la siguiente JQuery. Manifestación

 $(function() { $('#row_dim').hide(); $('#type').change(function(){ if($('#type').val() == 'parcel') { $('#row_dim').show(); } else { $('#row_dim').hide(); } }); }); 

Tratar:

 if($("option[value='parcel']").is(":checked")) $('#row_dim').show(); 

O incluso:

 $(function() { $('#type').change(function(){ $('#row_dim')[ ($("option[value='parcel']").is(":checked"))? "show" : "hide" ](); }); }); 

JSFiddle: http://jsfiddle.net/3w5kD/

cambia tu método jquery a

 $(function () { /* DOM ready */ $("#type").change(function () { alert('The option with value ' + $(this).val()); //hide the element you want to hide here with //("id").attr("display","block"); // to show //("id").attr("display","none"); // to hide }); }); 
  

Hazlo así para cada valor También cambia los valores … según tus parámetros

Pruebe el siguiente JS

 $(function() { $('#type').change(function(){ $('#row_dim').hide(); if ($(this).val() == 'parcel') { $('#row_dim').show(); } }); }); 

Prueba esto:

 $(function() { $("#type").change(function() { if ($(this).val() === 'parcel') $("#row_dim").show(); else $("#row_dim").hide(); } } 

Prueba esto:

  $(function () { $('#row_dim').hide(); // this line you can avoid by adding #row_dim{display:none;} in your CSS $('#type').change(function () { $('#row_dim').hide(); if (this.options[this.selectedIndex].value == 'parcel') { $('#row_dim').show(); } }); }); 

Demo aquí

Nada nuevo, pero el almacenamiento en caché de sus colecciones de jQuery tendrá un pequeño impulso

 $(function() { var $typeSelector = $('#type'); var $toggleArea = $('#row_dim'); $typeSelector.change(function(){ if ($typeSelector.val() === 'parcel') { $toggleArea.show(); } else { $toggleArea.hide(); } }); }); 

Y en JS vanilla para supervelocidad:

 (function() { var typeSelector = document.getElementById('type'); var toggleArea = document.getElementById('row_dim'); typeSelector.onchange = function() { toggleArea.style.display = typeSelector.value === 'parcel' ? 'block' : 'none'; }; }); 

Utilicé el siguiente fragmento basado en jQuery para que un elemento select muestre un elemento de div que tenga una id que coincida con el value de la option -elemento al mismo tiempo que oculta los div que no coinciden. No estoy seguro de que sea la mejor manera, pero es una forma.

 $('#sectionChooser').change(function(){ var myID = $(this).val(); $('.panel').each(function(){ myID === $(this).attr('id') ? $(this).show() : $(this).hide(); }); }); 
 .panel {display: none;} #one {display: block;} 
  

Thing One

Thing Two

Thing Three

Jquery Onchange Select Option Div Ocultar y Mostrar

Espectáculo normal de piel

  $(function() { $('#tasks').hide(); $('#conference').hide(); $('#task_conference').change(function(){ if($('#task_conference').val() == '0') { $('#tasks').show(); $('#conference').hide(); } else if($('#task_conference').val() == '1'){ $('#conference').show(); $('#tasks').hide(); }else if($('#service_type').val() == '2'){ $('#tasks').show(); $('#conference').show(); } }); 

Edit Mode hide show

  if ($('#task_conference :selected').val() == '0') { $('#tasks').show(); } else if ($('#task_conference :selected').val() == '1') { $('#conference').show(); } else { $('#tasks').hide(); $('#conference').hide(); } });