How can I display a description of drop down option

Hello,

I have a downloads page on which I have a form with a drop down choice of what the visitor wants to download: The form is below:

                    <table>
                   <tr>
				  <td width="210" align="left" valign="middle" class="">Your Country:</td>
					<td><select class=" validate['required']" name="country" id="country" type="text" required="true" size="1" disabled="disabled" onChange="set_city_state(this,city_state)" style='width:250px;'></select></td>
			    	</tr> 
                                 
			    	<tr>
				  <td width="210" align="left" valign="middle" class="">Your State/Province:</td>

			<td><select name="city_state" id="city_state" type="text" required="true"  size="1" disabled="disabled" onChange="print_city_state(country,this)" style='width:250px;' class=" validate['required']"></select>
				  </td>
				</tr>
                
                 <tr>
				  <td width="210" align="left" valign="middle" class="">Select the Download:</td>
					<td>    <select id='downloads' name='downloads' type="text" class=" validate['required']" required="true" style='width:250px;' onChange='change_downloads();' >
                        <option value='Select an Equipment' selected='selected' >Select a Download</option>
                        <option value='Catalogue - Model - TMC-IA'>Catalogue - Model - TMC-IA</option>
                        <option value='Catalogue - Model - TMC-SA'>Catalogue - Model - TMC-SA</option>
                        <option value='Catalogue - Model - Compact'>Catalogue - Model - Compact</option>
                                      
                     </select>
                    </td> 
                    </table>               

I need a description to be displayed below or above the form of what ever choice of download is made. For Example if a choice of "Catalogue - Model - TMC-SA" is made a description of this catalogue is displayed instantly.

Would I get help how to do that.

Thanks

Ron

Hi Ronn,

Please see this post.

Bob

Thanks Bob.

I went through the post. Well this is what I am looking for. I used the html code you suggested:

    <div class="form_item">
      <div class="form_element cf_dropdown">
        <label class="cf_label" style="width: 150px;">Click Me to Edit</label>
        <select class="cf_inputbox" id="select_0" size="1" title=""  name="select_0">
          <option value="">Choose Option</option>
          <option value="option 1" title='Aenean ligula ipsum, ornare et ultricies vitae, scelerisque eu mauris.' >option 1</option>
    <option value="option 2" title='Sed tempus pulvinar erat.
    Vivamus eleifend, diam vel volutpat viverra,
    purus arcu dictum sem, non laoreet enim risus dapibus tortor.' >option 2</option>
    <option value="option 3" title='Maecenas congue eros nunc, et sollicitudin dui. Sed sodales mollis mi in hendrerit.' >option 3</option>
        </select>
      </div>
      <div class="cfclear"> </div>
    </div>

BUT. It does not seem to work.

I also tried using the .js code:

    window.addEvent('domready', function() {
      var select_0 = $('select_0');
      select_0.addEvent('click', function() {
        var selected = select_0.selectedIndex;
        var option = select_0.options[selected];
        option = $(option);
        var desc = option.getProperty('title');
        if ( $('detail') ) {
          $('detail').remove();
        }
        var detail = new Element('div', {
          id : 'detail',
          styles : {
            display : 'block',
            border : '1px solid silver',
            width : 150
          }
        });
        if ( desc ) {
          detail.innerHTML = desc;
          detail.injectAfter(select_0);
        }
       });
    });

It does not seem to work. I am using the CFv4 with Joomla 1.7

Ron

Hi,

I was wondering if my post is going unnoticed.

Hope to get some reply..

Ron

I was wondering if my post is going unnoticed.

Hope to get some reply..

Ron

Don't worry. I think GreyHead will reply soon :wink:

Hi Ronn,

Sorry to have been a while getting to this one. There is one small change needed for it to work with MooTools 1.3 in Joomla! 1.6/1.7. Replace this line

$('detail').remove();

with

$('detail').dispose();

and that should be it.

Bob