I am trying to create a form which when the select element 'parcel' is selected it will show a div but when it is not selected I would like to hide the div. Here is my markup at the moment:
This is my HTML so far..
<div class="row">
Type
<select name="type" id="type" style="margin-left:57px; width:153px;">
<option ame="l_letter" value="l_letter">Large Letter</option>
<option name="letter" value="letter">Letter</option>
<option name="parcel" value="parcel">Parcel</option>
</select>
</div>
<div class="row" id="row_dim">
Dimensions
<input type="text" name="length" style="margin-left:12px;" class="dimension" placeholder="Length">
<input type="text" name="width" class="dimension" placeholder="Width">
<input type="text" name="height" class="dimension" placeholder="Height">
</div>
This is my jQuery so far..
$(function() {
$('#type').change(function(){
$('#row_dim').hide();
$("select[@name='parcel']:checked").val() == 'parcel').show();
});
});
<script>
$(document).ready(function(){
$('#colorselector').on('change', function() {
if ( this.value == 'red')
{
$("#divid").show();
}
else
{
$("#divid").hide();
}
});
});
</script>
Do like this for every value Also change the values... as per your parameters
Try this:
$(function() {
$("#type").change(function() {
if ($(this).val() === 'parcel') $("#row_dim").show();
else $("#row_dim").hide();
}
}
Try this:
$(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();
}
});
});
I used the following jQuery-based snippet to have a select
-element show a div
-element that has an id
that matches the value
of the option
-element while hiding the div
s that do not match. Not sure that it's the best way, but it is a way.
$('#sectionChooser').change(function(){_x000D_
var myID = $(this).val();_x000D_
$('.panel').each(function(){_x000D_
myID === $(this).attr('id') ? $(this).show() : $(this).hide();_x000D_
});_x000D_
});
_x000D_
.panel {display: none;}_x000D_
#one {display: block;}
_x000D_
<select id="sectionChooser">_x000D_
<option value="one" selected>Thing One</option>_x000D_
<option value="two">Thing Two</option>_x000D_
<option value="three">Thing Three</option>_x000D_
</select>_x000D_
_x000D_
<div class="panel" id="one">_x000D_
<p>Thing One</p>_x000D_
</div>_x000D_
<div class="panel" id="two">_x000D_
<p>Thing Two</p>_x000D_
</div>_x000D_
<div class="panel" id="three">_x000D_
<p>Thing Three</p>_x000D_
</div>_x000D_
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
_x000D_
Try:
if($("option[value='parcel']").is(":checked"))
$('#row_dim').show();
Or even:
$(function() {
$('#type').change(function(){
$('#row_dim')[ ($("option[value='parcel']").is(":checked"))? "show" : "hide" ]();
});
});
JSFiddle: http://jsfiddle.net/3w5kD/
Try the below JS
$(function() {
$('#type').change(function(){
$('#row_dim').hide();
if ($(this).val() == 'parcel')
{
$('#row_dim').show();
}
});
});
change your jquery method to
$(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
});
});
Nothing new but caching your jQuery collections will have a small perf boost
$(function() {
var $typeSelector = $('#type');
var $toggleArea = $('#row_dim');
$typeSelector.change(function(){
if ($typeSelector.val() === 'parcel') {
$toggleArea.show();
}
else {
$toggleArea.hide();
}
});
});
And in vanilla JS for super speed:
(function() {
var typeSelector = document.getElementById('type');
var toggleArea = document.getElementById('row_dim');
typeSelector.onchange = function() {
toggleArea.style.display = typeSelector.value === 'parcel'
? 'block'
: 'none';
};
});
Source: Stackoverflow.com