Recuperare testo da etichetta cliccata in un gruppo pulsanti di scelta con status input invariato

[Nicola4600]

Buongiorno a tutti

Come è possibile selezionare l'etichetta del valore di un pulsante di scelta cliccata e inserirla all'interno di un tag span se lo status di input non varia in checked ma viene aggiunta una classe checked allo span che lo contiene?

<div class="dropdown__selected dropdown__row" data-dropdown-status="open">
      <span class="dropdown__current">Effettua una scelta</span>
      <span class="dropdown__icon"></span>
   </div>

Codice per etichetta non cliccata (il tag span non possiede una classe)

            <div id="step_option_4_44" class="option option_group" style="">
            <div style="display: none;" class="radio" id="uniform-option_4_44">
            <span>
            <input class="dropdown__label__value" data-step="4" id="option_4_44" name="step[4][]" value="44" type="radio">
            </span>
            </div>
            <label class="dropdown__label dropdown__row" for="option_4_44">Pannello Bianco Numero Nero</label>
            </div>

Codice per etichetta cliccata (il tag span possiede la classe checked)

            <div id="step_option_4_44" class="option option_group" style="">
            <div style="display: none;" class="radio" id="uniform-option_4_44">
            <span class ="checked">
            <input class="dropdown__label__value" data-step="4" id="option_4_44" name="step[4][]" value="44" type="radio">
            </span>
            </div>
            <label class="dropdown__label dropdown__row" for="option_4_44">Pannello Bianco Numero Nero</label>
            </div>

Di seguito il codice che non vorrei adattare:

$(document).ready(function() {


   $('.dropdown__selected').click(function(e) {
      e.preventDefault();
      e.stopPropagation();

      var trigger = $('.dropdown__selected'),
         status = trigger.attr('data-dropdown-status'),
         dropdownOptions = $('.dropdown__seasons');


      if (status === 'closed') {
         trigger.attr('data-dropdown-status', 'open');
         dropdownOptions.show(100);

      } else if (status === 'open') {
         trigger.attr('data-dropdown-status', 'closed');
         dropdownOptions.hide(100);

      }

   });

   // Recupera il valore di input con status checked (dello span con classe checked) e mostralo nel tag span
   $('.dropdown__label__value').change(function() {
      var value = $(this).parent('.dropdown__label').text();
      $('.dropdown__current').text(value);
      $('.dropdown__selected').attr('data-dropdown-status', 'closed');
      $('.dropdown__seasons').slideUp(100);

   });

});

Spero di non aver fatto confusione

Grazie in anticipo

[Nicola4600]

Dal momento che per l'elemento input selezionato non viene mostrato lo status checked il quale invece viene aggiunto come classe css al tag span ho modificato l'ultimo blocco di codice come segue:

<div id="selezopzione">
   <div class="dropdown__selected dropdown__row" data-dropdown-status="closed">
      <span class="dropdown__current">Pannello Gold Numero Nero</span>
      <span class="dropdown__icon"></span>
   </div>

   <div class="dropdown__seasons" style="display: none;">
            <div id="step_option_4_86" class="option option_group" style="display: block;">
                <div style="display: none;" class="radio" id="uniform-option_4_86">
                    <span class="checked"> /*  span con status checked  */
                        <input class="dropdown__label__value" data-step="4" id="option_4_86" name="step[4][]" value="86" type="radio">
                    </span>
                </div>
                        <label class="dropdown__label dropdown__row" for="option_4_86">Pannello Nero Numero Bianco</label>
            </div>
    
            <div id="step_option_4_87" class="option option_group" style="display: block;">
                <div style="display: none;" class="radio" id="uniform-option_4_87">
                    <span>
                        <input class="dropdown__label__value" data-step="4" id="option_4_87" name="step[4][]" value="87" type="radio">
                    </span>
                </div>
                        <label class="dropdown__label dropdown__row" for="option_4_87">Pannello Bianco Numero Nero</label>
            </div>
<script>
 $(document).ready(function() {

   // Default dropdown action to show/hide dropdown content
   $('.dropdown__selected').click(function(e) {
      e.preventDefault();
      e.stopPropagation();

      var trigger = $('.dropdown__selected'),
         status = trigger.attr('data-dropdown-status'),
         dropdownOptions = $('.dropdown__seasons');

      // Check status
      if (status === 'closed') {
         trigger.attr('data-dropdown-status', 'open');
         dropdownOptions.show(100);

      } else if (status === 'open') {
         trigger.attr('data-dropdown-status', 'closed');
         dropdownOptions.hide(100);

      }

   });

      $("span #option_4_89").on("DOMSubtreeModified", function() {
    var value = $('#step_option_4_89 .dropdown__label').text();
      $('.dropdown__current').text(value);
      $('.dropdown__selected').attr('data-dropdown-status', 'closed');
      $('.dropdown__seasons').slideUp(100);

   });
  });
</script>
    </div>
</div>

In questo modo riesco a visualizzare il gruppo opzioni scelta come un elenco a discesa, cliccando l'elenco a discesa chiuso, questo si apre e mostra le opzioni, cliccando un'opzione il menu si chiude per� al posto di "Effettua una selezione" viene mostrata sempre l'ultima voce presente in elenco