鼠标移到DropDown值上

Question

我有一个具有值.So的多个选择下拉列表，问题是这些值太长，用户无法查看它们，我想在下拉列表的每个值上创建鼠标，在鼠标上方显示下拉列表的用户当前值

我的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>

然后，如果您在项目上悬停，工具提示应该显示。在这里查看一个示例(我做了前两个)：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代码示例