当<optgroup>文本不在焦点时，如何在<select>下拉列表中将它添加到选定的<select>文本中？

Question

当选定的<option>的<optgroup>不在焦点时，如何在下拉菜单上显示它的文本？

目前，当焦点不集中时，它看起来是这样的：

​

​

当它处于焦点时，它看起来如下所示：

​

​

如果可能的话，我希望它能显示“乙肝核心抗体血液测试”时，它不是焦点。

有办法这样做吗？

当前的代码如下所示：

<select name="bloodsVaccinesTypesBloods-${newRowId}" id="bloodsVaccinesTypesBloods-${newRowId}" class="bloodsVaccinesDropdown bloodsVaccinesTestTypes bloodsVaccinesTypesBloods">
    <optgroup label="Hepatitis B">
        <option value="12" selected="selected">Antigen blood test</option>
        <option value="13">Core antibody blood test</option>
        <option value="10">Vaccine (course of 3 vaccines & 5 year booster)</option>
    <optgroup label="Hepatitis C">
        <option value="14">Antibody blood test</option>
        <option value="15">RNA blood test</option>
    </optgroup>
</select>

Answer 1

这可能会起作用(注意，我假设是id=bloodsVaccinesTypesBloods)：

$('#bloodsVaccinesTypesBloods').focusout(function(){
      $('#bloodsVaccinesTypesBloods > optgroup').each(function() {
         $(this).children().each(function() {
         $(this).attr('label',$(this).parent().attr('label')+ ' - ' + $(this).text());
      });
      });
});

$('#bloodsVaccinesTypesBloods').focus(function(){
       $('#bloodsVaccinesTypesBloods > optgroup').each(function() {
                    $(this).children().each(function() {
                    $(this).attr('label',$(this).text());
                     });
                });
});

即https://jsfiddle.net/hzg684d3/