PDA

View Full Version : Dropdown that shows a result



JohnCRUK
May 24th, 2016, 10:09 PM
Hi there,

It's been a while since I've done something outside of frontend development, so I would greatly appreciate some advice.

I'm after creating a drop down that when an option is selected, it updates a field below. For example:

Option A - Great, heres some option A text
Option B - Great, heres some option B text
Option C - Great, heres some option C text

So to confirm, someone would select the drop down and choose for example Option B and then once selected the text below will show Great, heres some option B text.

I'm unsure if this would need some Ajax/javascript also?

Many thanks,
John

Synaptic
May 25th, 2016, 07:45 PM
You'd need Javascript for this but that's still Front-End development. Here's an example

HTML:


<select>
<option id="op1" onClick="showText('op1')">Option 1</option>
<option id="op2" onClick="showText('op2')">Option 2</option>
<option id="op3" onClick="showText('op3')">Option 3</option>
<option id="op4" onClick="showText('op4')">Option 4</option>
</select>
<input type="text" value="" id="mybox" size="100"><br>


Javascript:


function showText(x)
{
switch(x)
{
case "op1":
document.getElementById("mybox").value = "Option 1 Value";
break;
case "op2":
document.getElementById("mybox").value = "Option 2 Value";
break;
case "op3":
document.getElementById("mybox").value = "Option 3 Value";
break;
case "op4":
document.getElementById("mybox").value = "Option 4 Value";
break;
}
}