jQuery/HTML Select:当 select 关闭时,在 selected 选项中显示更多文本
jQuery/HTML Select: Show more text in selected option when select is closed
给定以下下拉列表:
我有两个选项组,虽然会有更普遍的选项,当一个选项被 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 后重写选项也有明显的延迟。不过,更改选项后不会延迟重写。
也许是这个?
$("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"));
});
给定以下下拉列表:
我有两个选项组,虽然会有更普遍的选项,当一个选项被 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 后重写选项也有明显的延迟。不过,更改选项后不会延迟重写。
也许是这个?
$("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"));
});