Question

我有一个具有值的多选择下拉菜单。因此问题是值太长以至于用户无法查看它们。我想在下拉菜单的每个值和鼠标悬停上创建鼠标悬停我将向用户显示下拉列表的当前值

我的HTML

<select multiple="" style="width:190px;" class="select-box" id="hotel" name="hotel"><option value="Abassides Palace">Abassides Palace (Algiers)</option><option value="Albert Premier">Albert Premier (Algiers)</option><option value="Club Azur">Club Azur (Algiers)</option><option value="Dar Diaf Alger">Dar Diaf Alger (Algiers)</option><option value="Dar El Ikram">Dar El Ikram (Algiers)</option><option value="Dar El Ikram">Dar El Ikram (Algiers)</option><option value="El Biar">El Biar (Algiers)</option><option value="El Biar Hotel">El Biar Hotel (Algiers)</option><option value="El Marsa">El Marsa (Algiers)</option><option value="Grand Hotel Adghir">Grand Hotel Adghir (Algiers)</option><option value="Grand Hotel Adghir">Grand Hotel Adghir (Algiers)</option><option value="HILTON ALGER">HILTON ALGER (Algiers)</option><option value="Hilton Alger">Hilton Alger (Algiers)</option><option value="Hilton Alger Hotel">Hilton Alger Hotel (Algiers)</option><option value="Hotel El Aurassi">Hotel El Aurassi (Algiers)</option><option value="Hotel El-Djazair">Hotel El-Djazair (Algiers)</option><option value="Hotel El-Djazair">Hotel El-Djazair (Algiers)</option><option value="Hotel Hammamet Ain Benian">Hotel Hammamet Ain Benian (Algiers)</option><option value="Hotel Hydra">Hotel Hydra (Algiers)</option><option value="Hotel Sweet">Hotel Sweet (Algiers)</option><option value="Hydra">Hydra (Algiers)</option><option value="Ibis Alger AÃ©roport">Ibis Alger AÃ&copy;roport (Algiers)</option><option value="Majestic Annaba">Majestic Annaba (Annaba)</option><option value="Mercure Alger Aeroport">Mercure Alger Aeroport (Algiers)</option><option value="Mercure Alger Aeroport">Mercure Alger Aeroport (Algiers)</option><option value="Mimosa Palace">Mimosa Palace (Annaba)</option><option value="Mimosa Palace Annaba">Mimosa Palace Annaba (Annaba)</option><option value="Palace Appart HÃ´tel">Palace Appart HÃ´tel (Algiers)</option><option value="Rym El Djamil Annaba">Rym El Djamil Annaba (Annaba)</option><option value="Sabri Hotel">Sabri Hotel (Annaba)</option><option value="Safir Alger">Safir Alger (Algiers)</option><option value="Safir Alger">Safir Alger (Algiers)</option><option value="Safir Mazafran">Safir Mazafran (Algiers)</option><option value="Samir Hotel">Samir Hotel (Algiers)</option><option value="Sheraton Club des Pins Resort">Sheraton Club des Pins Resort (Algiers)</option><option value="Sheraton Club des Pins Resort">Sheraton Club des Pins Resort (Algiers)</option><option value="Sofitel Algiers">Sofitel Algiers (Algiers)</option><option value="Sofitel Algiers Hamma Garden">Sofitel Algiers Hamma Garden (Algiers)</option><option value="Sweet Hotel">Sweet Hotel (Algiers)</option><option value="Tulip Inn Rym el Djamil">Tulip Inn Rym el Djamil (Annaba)</option></select>

请告诉我一些我们可以做的事情。

Answer 1

您可以为选项添加标题属性。

<option title="Abassides Palace" value="Abassides Palace">Abassides Palace (Algiers)</option>

如果您将鼠标悬停在该项目上，则应显示工具提示。在这里的jsfiddle中检查一个例子（我做了前两个）：http://jsfiddle.net/bekb5k2m/

Answer 2

如果您使用的是jquery，那么添加一个这样的简单代码会将标题添加到您的所有选项中。

$(document).ready(function() {
    // the code is looping through all the options 
    // and setting the same value to the "title" as in "value" attribute.
    $(".select-box option").each(function () {
        var value = $(this).val();
        $(this).attr("title", value);
    });
});

以下是演示：jsfiddle code sample

鼠标悬停在DropDown值上

2 个答案: