I want to have jQuery show div id='business' only if 'business use' is selected in the dropdown box.
This is my code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$('#purpose').on('change', function() {
if ( this.value == '1');
{
$("#business").show();
}
else
{
$("#business").hide();
}
});
});
</script>
<body>
<select id='purpose'>
<option value="0">Personal use</option>
<option value="1">Business use</option>
<option value="2">Passing on to a client</option>
</select>
<div style='display:none;' id='business'>Business Name<br/>
<br/>
<input type='text' class='text' name='business' value size='20' />
<br/>
</div>
</body>
and the JSFiddle: http://jsfiddle.net/2kGzZ/1/
This question is related to
javascript
jquery
html
input
try this which is working for me in my test demo
<script>
$(document).ready(function(){
$('#dropdown').change(function()
{
// var selectedValue = parseInt(jQuery(this).val());
var text = $('#dropdown').val();
//alert("text");
//Depend on Value i.e. 0 or 1 respective function gets called.
switch(text){
case 'Reporting':
// alert("hello1");
$("#td1").hide();
break;
case 'Buyer':
//alert("hello");
$("#td1").show();
break;
//etc...
default:
alert("catch default");
break;
}
});
});
</script>
The core problem is the js errors:
$('#purpose').on('change', function () {
// if (this.value == '1'); { No semicolon and I used === instead of ==
if (this.value === '1'){
$("#business").show();
} else {
$("#business").hide();
}
});
// }); remove
http://jsfiddle.net/Bushwazi/2kGzZ/3/
I had to clean up the html & js...I couldn't help myself.
HTML:
<select id='purpose'>
<option value="0">Personal use</option>
<option value="1">Business use</option>
<option value="2">Passing on to a client</option>
</select>
<form id="business">
<label for="business">Business Name</label>
<input type='text' class='text' name='business' value size='20' />
</form>
CSS:
#business {
display:none;
}
JS:
$('#purpose').on('change', function () {
if(this.value === "1"){
$("#business").show();
} else {
$("#business").hide();
}
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#purpose').on('change', function() {
if ( this.value == '1')
//.....................^.......
{
$("#business_new").hide();
$("#business").show();
}
else if ( this.value == '2')
{
$("#business").hide();
$("#business_new").show();
}
else
{
$("#business").hide();
}
});
});
</script>
<body>
<select id='purpose'>
<option value="0">Personal use</option>
<option value="1">Business use</option>
<option value="2">Passing on to a client</option>
</select>
<div style='display:none;' id='business'>Business Name<br/>
<br/>
<input type='text' class='text' name='business' value size='20' />
<input type='text' class='text' name='business' value size='20' />
<br/>
</div>
<div style='display:none;' id='business_new'>Business Name<br/>
<br/>
<input type='text' class='text' name='business' value="1254" size='20' />
<input type='text' class='text' name='business' value size='20' />
<br/>
</div>
</body>
you have error in your code unexpected token
.use:
$('#purpose').on('change', function () {
if (this.value == '1') {
$("#business").show();
} else {
$("#business").hide();
}
});
Update: You can narrow down the code using .toggle()
$('#purpose').on('change', function () {
$("#business").toggle(this.value == '1');
});
https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-show-hide-div-using-select-box It's working well in my case
$(document).ready(function(){_x000D_
$("select").change(function(){_x000D_
$(this).find("option:selected").each(function(){_x000D_
var optionValue = $(this).attr("value");_x000D_
if(optionValue){_x000D_
$(".box").not("." + optionValue).hide();_x000D_
$("." + optionValue).show();_x000D_
} else{_x000D_
$(".box").hide();_x000D_
}_x000D_
});_x000D_
}).change();_x000D_
});
_x000D_
<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
<meta charset="utf-8">_x000D_
<title>jQuery Show Hide Elements Using Select Box</title>_x000D_
<style>_x000D_
.box{_x000D_
color: #fff;_x000D_
padding: 50px;_x000D_
display: none;_x000D_
margin-top: 10px;_x000D_
}_x000D_
.red{ background: #ff0000; }_x000D_
.green{ background: #228B22; }_x000D_
.blue{ background: #0000ff; }_x000D_
</style>_x000D_
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>_x000D_
_x000D_
</head>_x000D_
<body>_x000D_
<div>_x000D_
<select>_x000D_
<option>Choose Color</option>_x000D_
<option value="red">Red</option>_x000D_
<option value="green">Green</option>_x000D_
<option value="blue">Blue</option>_x000D_
</select>_x000D_
</div>_x000D_
<div class="red box">You have selected <strong>red option</strong> so i am here</div>_x000D_
<div class="green box">You have selected <strong>green option</strong> so i am here</div>_x000D_
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>_x000D_
</body>_x000D_
</html>
_x000D_
You need to either put your code at the end of the page or wrap it in a document ready call, otherwise you're trying to execute code on elements that don't yet exist. Also, you can reduce your code to:
$('#purpose').on('change', function () {
$("#business").css('display', (this.value == '1') ? 'block' : 'none');
});
Source: Stackoverflow.com