Forum Moderators: open
I'm trying to have a drop down menu that has a other option to it. When you select the other option and text box appears so you can put you other in it. I tried searching on the site but didn't come up with anything, who knows I could be choosing the wrong word combination.
I've also tried looking on Google but didn't have any luck there either. I remember coming across something a good while back but I can't remember where that is anymore lol. So if someone could help or point me in a good location I would appreciate it.
edit: sorry got it wrong
I forget where I got this, but it works.
<head>
<script type="text/javascript"> <!-- you can add as many id's as necessary -->
// <![CDATA[
function display(obj,id1,id2,id3) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
}
// ]]>
</script>
<style type="text/css">
#id1 { /* The id does not have to match the above script */
position:relative;
display: none;
}
#id2 {
position:relative;
display: none;
}
#id3 {
position:relative;
display: none;
}
</style>
</hrad>
<body> <1-- this is where the id's have to match the css -->
<select size="5" name="Heading" onchange="display(this,'id1','id2','id3');">
<option class="highlight">Select Heading:</option>
<option value="id1">One</option>
<option value="id2">Two</option>
<option value="id3">Three</option>
</select>
<1-- then the matching div can be drop dwon box, text box, whatever -->
<div id="id1">
<p><select size="5" name="Category">
<option>A</option>
<option>B/option>
<option>C</option>
<option>D</option>
<option>E</option>
</select></p>
</div>
<div id="id2">
<p><select size="5" name="Category">
<option>A</option>
<option>B/option>
<option>C</option>
<option>D</option>
<option>E</option>
</select></p>
</div>
<div id="id3">
<p><select size="5" name="Category">
<option>A</option>
<option>B/option>
<option>C</option>
<option>D</option>
<option>E</option>
</select></p>
</div>
</body>
Hope it helps and is what you are looking for.
Marshall
Maybe this works for you:
<script type="text/javascript">
function toggleField(val) {
var o = document.getElementById('other');
(parseInt(val) == 99)? o.style.display = 'block' : o.style.display = 'none';
}
</script>
and the form:
<form action="" method="post">
<select name="sel" id="sel" onChange="toggleField(this.value);">
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="99">Other</option>
</select>
<input type="text" name="other" id="other" style="display: none;">
</form>
Hi,Maybe this works for you:
<script type="text/javascript">
function toggleField(val) {
var o = document.getElementById('other');
(parseInt(val) == 99)? o.style.display = 'block' : o.style.display = 'none';
}
</script>and the form:
<form action="" method="post">
<select name="sel" id="sel" onChange="toggleField(this.value);">
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="99">Other</option>
</select>
<input type="text" name="other" id="other" style="display: none;">
</form>
<option value="">No Option</option>
<option value="Out of Office">Out of Office</option>
<option value="Holiday/Birthday">Holiday/Birthday</option>
<option value="Other">Other</option>
try this:
function toggleField(val) {
var o = document.getElementById('other');
(val == 'Other')? o.style.display = 'block' : o.style.display = 'none';
}
and the form:
<form action="" method="post">
<select name="sel" id="sel" onChange="toggleField(this.value);">
<option value="">No Option</option>
<option value="Out of Office">Out of Office</option>
<option value="Holiday/Birthday">Holiday/Birthday</option>
<option value="Other">Other</option>
</select>
<input type="text" name="other" id="other" style="display: none;">
</form>HTH, AA
That did the job. It works great, thanks for the help!
:)
