You know if jQuery (or similar) can do this....?

 

I have a <select> drop down with a number of options:

 

for example: green, blue, red, other

 

If the user chooses other, i want an <input> box to appear so they can type in their answer.

 

it probably can do this, but is there a tutorial on jQuery or anything anywhere, or does anyone know how to do this, it must be a fairly common problem.

you don't need jquery. Basic javascript can do that. Use css to hide the input box. You put a code on the onchange function of the first select so when it's value equals other it unhides the input box. Similiar to this. If you need more help just post. This hides a div but the principle is the same.

 

function checkHide(div_id, check_value, trigger_value)
{

var hiddenDiv = document.getElementById(div_id);

if (check_value == trigger_value)
{
	hiddenDiv.style.display = "block";	
}
else
{
	hiddenDiv.style.display = "none";	
}
return true;
}

verygood Daemon Byte.

 

If you want to keep it jQuery, heres how:

HTML

<select id="checkhide" checkfor="other" showid="colorinput">
<option>red</option>
<option>blue</option>
<option>other</option></select>

<input id="colorinput" />

 

jQuery:

$( function() {
 $("select#checkhide option").each( function() {
var checkfor = $(this).parent().attr("checkfor");
var showid	= $(this).parent().attr("showid");
var needle	= $(this).text();
if(needle == checkfor) {
  $("#"+showid).show();
} else {
   $("#"+showid).hide();
}
 });
});

 

This is probably the weirdest way to do it, but it requires no onclick / onchange in the select, nor any javvascript editing to make it work for different selects.

awesome, i'll give it a go, if i get stuck ill post back.

 

cheers!

woops i made a mistake. code shoudl be this:

$( function() {
 $("select#checkhide option").click( function() {
var checkfor = $(this).parent().attr("checkfor");
var showid	= $(this).parent().attr("showid");
var needle	= $(this).text();
if(needle == checkfor) {
  $("#"+showid).show();
} else {
   $("#"+showid).hide();
}
 });
});

I went with the Javascript version, rather than the jQuery one.

 

At the moment i have this:

 

		function showTextBox(Q6) {

		if ( Q6.options[Q6.selectedIndex].value == "15" ) {

			document.getElementById("Q6a").style.display = "inline";

		} else {

			document.getElementById("Q6a").style.display = "none";

		}
	}

 

and the select has an onchange function...

 

<select id="Q6" name="Q6" onchange="showTextBox(this)">

 

which will display the input field, if the drop down has the value of 15.

 

How do i alter this, so it shows an input box, when a checkbox is ticked?

change

 

if(Q6.options[Q6.selectedIndex].value == "15")

 

to

 

if(Q6.checked)

 

Assuming Q6 is the checkbox

jquery version:

function showTextBox( checkid, textid ) {
 if( $("#"+checkid ).attr("checked") == "checked" ) {
 $("#"+textid ).show();
 }
}

cheers guys, this helps muchly

no problems