Menu
I have a select element in a form, and I want to display something only if the dropdown is not visible. Things I have tried:
Ideas?
450
here is how I would preferred to do it. focus and blur is where it is at.
<html>
<head>
<title>SandBox</title>
</head>
<body>
<select id="ddlBox">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<div id="divMsg">some text or whatever goes here.</div>
</body>
</html>
<script type="text/javascript">
window.onload = function() {
var ddlBox = document.getElementById("ddlBox");
var divMsg = document.getElementById("divMsg");
if (ddlBox && divMsg) {
ddlBox.onfocus = function() {
divMsg.style.display = "none";
}
ddlBox.onblur = function() {
divMsg.style.display = "";
}
divMsg.style.display = "";
}
}
</script>
Conditional-content, which is what you're asking about, isn't that difficult. The in the following example, I'll use jQuery to accomplish our goal:
<select id="theSelectId">
<option value="dogs">Dogs</option>
<option value="birds">Birds</option>
<option value="cats">Cats</option>
<option value="horses">Horses</option>
</select>
<div id="myDiv" style="width:300px;height:100px;background:#cc0000"></div>
We'll tie a couple events to show/hide #myDiv based upon the selected value of #theSelectId
$("#theSelectId").change(function(){
if ($(this).val() != "dogs")
$("#myDiv").fadeOut();
else
$("#myDiv").fadeIn();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
