Show text depending on what is chosen

[kvnirvana]

How can I do it, so if I choose something from the drop down it will display a text area next to the drop down that will describe what is chosen? For instance if Apple is chosen it will show text next to the drop down list saying “A green fruit”?

 

  <form name='search' action=".$_SERVER['PHP_SELF']." method='post'> 
        
<table width='100%'>
<div style='position:relative;left:450px;top:30px;z-index:1>
	<tr> 
          <td colspan='2' style='font-family:verdana;font-size:110%'>
	  <p style='font-size:130%'><strong>Fruit</strong></p></br> </td>
        </tr> 
       </div> 
</table>
  <table width='50%'  style='position:absolute;left:310px;top:100px;height:0%'> 
<div >     
	<tr> 
<td align='right' style='font-family:verdana;font-size:110%;'>Fruit:</td><td><select name='fruit' style='font-size: 18px;'>

<option value='all'>All</option>
<option value='Apple'>Apple</option>
<option value='Lime'>Lime</option>
<option value='Banana'>Banana</option> 


          </select></td> </tr>		 

  
   </table>   <table width='50%'  style='position:absolute;left:70px;top:80px'>    
       
        <div  style='position:relative;left:470px;top:130px;z-index:1>
	<tr> 
          <td colspan='2' ><input type='submit' name='submit' style='font-size: 15px;' value='Fruit!'></td> 
        </tr> </div> </table></form>

	 <table> <td style='position:absolute;right:18px;top:36px' 'tdimage'  BACKGROUND='for.jpg' width='290' height='600'></td></tr>
        </table>" ; 
        

[Psycho]

There's a lot of ivalid HTML markup in that code. For example, once you open a table, any "non table" markup should only be inside TD or TH tags until the table is closed.

 

Anyway, add this trigger to your select tag:

 onchange="displayText(this);"

 

Then create a DIV for the text to be displayed in and give it an ID parameter, such as "description"

 

Then add this to the head of the document:

<script type="text/javascript">
function displayText(selObj)
{
    var selVal = selObj.options[selObj.selectedIndex].value;
    var outputObj = document.getElementById('description');

    switch(selVal)
    {
        case 'Apple':
          outputObj.innerHTML = 'A green fruit';
          break;

        case 'Lime':
          outputObj.innerHTML = 'Another green fruit';
          break;

        case 'Banana':
          outputObj.innerHTML = 'A yellow fruit'
          break;

        default:
          outputObj.innerHTML = ''
    }
}

</script>