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

Question

给定以下下拉列表：

我有两个选项组，虽然会有更普遍的选项，当一个选项被 selected 时，关闭的 select 框中显示的是：

使用jQuery、CSS或其他方式，如何让关闭的select框显示以下信息？

在下拉列表的每个选项中显示所有这些信息是非常丑陋和不必要的。我只需要在 select 未打开时显示额外信息。将需要额外的信息，因为他们可能已经忘记了 "Report 1" 他们 select 编辑的内容。

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

我目前正在考虑重写 select 菜单的打开和关闭选项，但是有没有更好的方法，因为它不能完全按预期工作？也许是我找不到或忽略的 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() );
    }
});

我尝试过的当前代码的问题是，如果用户打开下拉菜单，该选项将重置为 "Report 1" 或所需的任何内容，但如果他们不这样做 select一个新选项，只需单击 select 即可关闭，无需重写选项以包含额外的必要详细信息。打开 select 后重写选项也有明显的延迟。不过，更改选项后不会延迟重写。

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

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

jQuery/HTML Select: Show more text in selected option when select is closed

javascript

jquery

css

html-select