Question

我想将下拉值显示为工具提示。只要鼠标指向特定的下拉选项，那么所有值都应显示在工具提示中。

<td width="auto">
    <div style="width: 155px;" class="selectbox">
        <h:selectOneMenu
            onmouseover="displayToolTip(this);this.focus();"
            onfocus="SelectON(this);" onblur="SelectOFF(this);"
            value="#{BusinessInf.bOwnerShipStatusI }"
            disabled="#{BusinessInf.debtypeInd }"
            id="commOwnerShipStatusIndividual" styleClass="combobox">
                <f:selectItem itemLabel="--Pilih--" />
                <f:selectItems value="#{BusinessInf.bOwnerShipStatusIs }" />
                <a4j:support event="onchange"
                    action="#{BusinessInf.enableICRentOwn}"
                    reRender="commDateBorrowerOwns,commDatedebtorOwns">
                </a4j:support>
        </h:selectOneMenu>
    </div>
</td>

JS：

function displayToolTip(val){

    val.title = val.value;  
}

此代码仅显示所选的值。但我想显示包含下拉列表中所有值的工具提示。

Answer 1

每当鼠标指向特定的下拉选项时，该值应显示为工具提示/标题。

您可以直接从 HTML 执行此操作，方法是设置与值属性相匹配的标题属性

＆＃13;

<select title="Please Choose An Option">
    <option value="en-GB" title="en-GB">English (United Kingdom)</option>
</select>

＆＃13;

Answer 2

我使用了answer from Paul S中建议的title="" <select>属性：

您可以直接从 HTML 执行此操作，方法是设置与值属性相匹配的标题属性

updateTitle()函数会将title的{{1}}设置为<select>中所有值的连接字符串。

您可以在更新<option>后调用此功能，以使<option>与其内容保持同步。

title=""

function updateTitle() {
  $('select').each(function() {
    var titles = [];

    /* iterate though the <option> */
    $(this).children('option').each(function() {
      titles.push($(this).text());
    });

    /* update the title of <select> */
    $(this)
      .attr('title', titles.join(', '))
    ;
  });
}

$(function() {
  updateTitle();
});

显示工具提示中的所有下拉值

2 个答案: