Do something on select from dropdown
Simple script to show input fields by selecting a drop down. Based on jquery "on" function.
by scurrilus
HTML
<script src="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.js"></script>
<link rel="stylesheet" href="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.css">
<!--powered by SCURRILUS-->
<div id="scurrilusCopy"></div>
<script>scurrilusCopy();</script>
<!--end powered by SCURRILUS-->
<form>
<select id="drink" name="getraenk">
<option value="select">select</option>
<option value="cola">Cola</option>
<option value="fanta">Fanta</option>
<option value="sprite">Sprite</option>
</select>
<input id="cola" name="cola" value="cola" placeholder="Cola">
<input id="fanta" name="fanta" value="fanta" placeholder="Fanta">
<input id="sprite" name="sprite" value="sprite" placeholder="Sprite">
</form>
CSS
input {
display: none;
margin-top: 20px;
padding: 10px;
}
select {
width: 200px;
box-shadow: 2px 2px 5px #ccc;
-webkit-box-shadow: 2px 2px 5px #ccc;
-moz-box-shadow: 2px 2px 5px #ccc;
}
form {
margin-top: 120px;
}
JavaScript
$("#drink").on("change",function(){
var selectedDrink = $( "#drink option:selected" ).val();
if (selectedDrink == "selected") {
$("input").css("display", "none");
} else {
$("input").css("display", "none");
$("#"+selectedDrink).css("display", "block");
}
console.log(selectedDrink);
});