Show text of a dropdown dynamically

Probably already solved, but I didn't find it in the board.

I need to show dynamically the value of a dropdown.

I have a dropdown:

<select name="centrali_termiche" id="centrali_termiche" size="" class="form-control A" title="" style="" data-load-state="" data-tooltip="">
<option value="">Scegli...</option>
<option value="1">1) Controllo funzionamento caldaie</option>
<option value="2">2) Controllo circuiti primari e secondari</option>
<option value="3">3) Controllo sistema di regolazione</option>
<option value="4">4) Lettura consumo combustibile</option>
<option value="4.1">4.1) Contatore Fiorentini</option>
<option value="5">5) Temp. mandata acqua calda risc.</option>
<option value="6">6) Temp. ritorno acqua calda risc.</option>
</select>

After that I would like to show what is choosen above.

I've tryed something like this, a custom code and an action onload:

window.addEvent('domready', function() {
  $('value_container_div').hide();
  $('centrali_termiche').addEvent('change', function() {
    var opt;
    opt = this.getSelected().getProperty('text').toString();
    if ( opt.length > 0 ) {
      $('choice').value = opt;
      $('value_container_div').show();
    } else {
      $('choice').value = '';
      $('value_container_div').hide();
    }
  });
});

and a custom code on designer

<div id="value_container_div"><span id="choice"></span></div>

With no result.
any suggestion?

thanks in advance

Hi vismay,

As you have solved, it what was your solution?

Bob

sorry,
my sentence was "probably someoune has already solved somewhere in the forum, but I didn't find the solution!"

My question is how I can mannage to show dinamically a dropdown value ( or better, text).
The code above was taken from a FAQ, but don't work.

Any suggestion?

Hi vismay,

Your code is using MooTools and needs to be re-written using jQuery for CFv5 on Joomla! 3 It needs to be more like this

jQuery(document).ready(function(jQ) {
  jQ('#centrali_termiche').change( function() {
    var value = jQ('#centrali_termiche option:selected').val();
    if ( value == '' ) {
      jQ('#form-row-choice').hide();
    } else {
      jQ('#form-row-choice').show();
    }
    jQ('#choice').val(value);
  })
});

You will need to change the show.hide lines to match the ids in your form HTML

Bob

Perfect,
I get even the text of th option changing this:

 var value = jQ('#centrali_termiche option:selected').val();

in

 var value = jQ('#centrali_termiche option:selected').text();

But Im' not getting the custom code working

    <div id="form-row-choice"><span id="choice"></span></div>

It works only if in designer I use a container and a text box with IDs.

Hi vismay,

Sorry, I tested using a readonly input element. To show in a span I think it it would be jQ('#choice').text(value);

Bob