jQuery / HTML选择：当select关闭时，在所选选项中显示更多文本

Question

给出以下下拉列表：

我有两个选择组，但更常见的是，当选择一个选项时，关闭的选择框中显示的是：

使用jQuery，CSS或其他方法，如何让关闭的选择框显示以下信息？

在下拉列表中显示每个选项中的所有信息非常难看且不必要。我只需要在选择未打开时显示额外信息。需要额外的信息，因为他们可能忘记了哪些＆＃34;报告1＆＃34;他们选择了。

每个HTML选项集如下所示：

<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>

我目前的操作是在选择菜单的打开和关闭时重写选项的想法，但有没有更好的方法，因为它不能按照预期的那样工作？也许是一个我无法找到或忽略的jQuery插件？我尝试了以下jQuery并取得了有限的成功：

$('.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() );
    }
});

我尝试的当前代码的问题是，如果用户打开下拉菜单，该选项将重置为＆＃34;报告1＆＃34;或者根据需要，但是如果他们没有选择新选项并且只是单击选择那么它会关闭而不会重写选项以包含额外的必要细节。打开选择后，重写选项也有明显的延迟。改变选项后，没有延迟重写。

Answer 1

也许这个？

$("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