Select tag with input tag display none or block
<!DOCTYPE html>
<html>
<head>
<style>
#hidden_input {
display: none;
}
</style>
</head>
<body>
<select id=”test” name=”form_select” onchange=”showDiv(‘hidden_input’, this)”>
<option value=”0″>Hide</option>
<option value=”1″>Show</option>
</select>
<br>
<input id=”hidden_input” type=”email” placeholder=”Email” required=””>
<script>
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? ‘block’ : ‘none’;
}
</script>
</body>
</html>
How can I show a hidden div when a select option is selected?
<!DOCTYPE html>
<html>
<head>
<style>
#hidden_div {
display: none;
}
</style>
</head>
<body>
<select id=”test” name=”form_select” onchange=”showDiv(‘hidden_div’, this)”>
<option value=”0″>No</option>
<option value=”1″>Yes</option>
</select>
<div id=”hidden_div”>This is a hidden div</div>
<script>
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? ‘block’ : ‘none’;
}
</script>
</body>
</html>