Question

我有一张桌子。在<th>的{{1}}中，有一个<header>，其选项和大小= 1：

<select>

我需要在鼠标悬停时显示所有选择选项。为此，我使用jQuery：

<select multiple size="1"  class="filtersForCombobox" style="width:90%" name="filter2_status_id">
            <option value="">Select</option>
            {foreach from=$aDropDownsForFilters.status item=sName key=iIdCombobox}
                <option value="{$iIdCombobox}" {if $oBlock->compareStatuses($iIdCombobox) || in_array($iIdCombobox, $aFiltersData.status_id)} selected="selected"{/if}>{$sName|tr}</option>
            {/foreach}
 </select>

但是问题是我展开了标题，看起来很糟。

如何在表格正文上方的表格标题中显示选项？

谢谢。

Answer 1

您可以使用绝对定位。我在 上添加了th，因此它将计算出正常的高度。我还为mouseleaves添加了一个事件处理程序，该事件处理程序将size属性设置回1。

$( document ).on( 'mouseenter', '.cars', function() {
  $(this).attr("size", $(this).find("option").length);
  $(this).focus();
}).on( 'mouseleave', '.cars', function() {
  $(this).attr("size", 1);
});

th {
 position: relative;
}
.cars {
  width: 90%;
  position: absolute;
  top: 0;
  left: 5%;
}

.cars option:hover {
  background: rgb( 30, 144, 255);
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>
        &nbsp;
        <select multiple id="mySelect" size="1" class="cars">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="opel">Opel</option>
          <option value="audi">Audi</option>
        </select>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p> asdf as fd sda fdsa fds af sdaf dsa fds afd saf a fsa dfsa fdsa fd safd saf dsa</p>
      </td>
    </tr>
  </tbody>
</table>

在表格主体的表格标题中显示选项

1 个答案: