jQuery/HTML wählen: in ausgewählter Option mehr Text anzeigen, wenn die Auswahl

Question

geschlossen ist

die folgende Dropdown-Liste Gegeben:

Ich habe zwei optgroups, obwohl es wird allgemein sein, wenn eine Option ausgewählt ist, was in der geschlossenen Auswahlbox gezeigt ist:

mit jQuery, CSS oder anderen Mitteln, wie kann ich die folgenden Informationen das geschlossene Auswahlfeld zeigen müssen?

Das Anzeigen all dieser Informationen in jeder Option im Dropdown-Menü ist extrem hässlich und unnötig. Ich muss nur die zusätzlichen Informationen anzeigen, wenn die Auswahl nicht geöffnet ist. Die zusätzlichen Informationen werden benötigt, da sie möglicherweise vergessen haben, welchen "Bericht 1" sie ausgewählt haben.

Jedes HTML-Option Set sieht wie folgt aus:

<optgroup label="Chemistry: Alchemists - 2015/16"> 
    <option academic_year="2015/16" report_set_id="1234" report_name="Report 1" class_name="Alchemists" class_subject="Chemistry">Report 1</option> 
    <!-- etc. --> 
</optgroup> 

Ich bin derzeit auf der Idee des Umschreibens die Option auf Öffnen und Schließen des Auswahlmenüs arbeiten, aber gibt es eine bessere Art und Weise, wie es nicht ist Ganz wie gewünscht? Vielleicht ein jQuery-Plugin, das ich nicht finden oder übersehen kann? Ich habe die folgende jQuery mit begrenztem Erfolg versucht:

$('.start-reporting select').unbind().change(function(){ 
    var $selectedOption = $(this).find('option:selected'), 
     details = { 
      class_name: $selectedOption.attr('class_name'), 
      class_subject:$selectedOption.attr('class_subject'), 
      report_name:$selectedOption.attr('report_name'), 
      report_set_ID:$selectedOption.attr('report_set_ID') 
      academic_year:$selectedOption.attr('academic_year') 
     }; 
    $selectedOption.val($selectedOption.html()); 
    $selectedOption.html(details.class_subject + ': ' + details.class_name + ' (' + details.report_name + ') - ' + details.academic_year); 
    $(this).blur(); 
}); 
$('.start-reporting select').click(function() { 
    if($(this).is(':focus')) { 
     var $selectedOption = $(this).find('option:selected'); 
     $selectedOption.html($selectedOption.val()); 
    } 
}); 

Das Problem mit dem aktuellen Code, den ich versucht habe, ist, dass, wenn der Benutzer der Dropdown-Menü öffnet die Option zurückgesetzt wird auf „1 Bericht“ oder was auch immer je nach Bedarf, Wenn sie jedoch keine neue Option auswählen und einfach auf die Auswahl klicken, wird sie geschlossen, ohne dass die Option neu geschrieben werden muss, um die zusätzlichen notwendigen Details hinzuzufügen. Es gibt auch eine merkliche Verzögerung beim Neuschreiben der Option nach dem Öffnen der Auswahl. Keine Verzögerung beim Neuschreiben nach einer Änderung der Option.

Answer 1

Vielleicht das?

$("select").on("change", function() { 
    $(this).find("option").each(function() { 
     $(this).text($(this).attr("report_name")); 
    }); 

    var $opt = $(this).find("option:selected"); 
    $opt.text($opt.attr("class_subject") + ": " + $opt.attr("class_name") + "(" + $opt.attr("report_name") + ") - " + $opt.attr("academic_year")); 
}); 

Demo