創建用戶將鼠標懸停在選項上時展開的選擇下拉列表

我試圖創建一個具有基本列表的select元素，然後當用戶將鼠標懸停在其展開的選項上時顯示更完整的列表。創建用戶將鼠標懸停在選項上時展開的選擇下拉列表

我開始使用css隱藏所有我想隱藏的值，但是這並沒有調整選擇下拉的高度，所以我留下了大量的空白區域。

然後我試着有兩個選擇，一個用縮小列表，另一個用完整列表（這是隱藏的）。然後，當用戶將鼠標懸停在「其他」optgroup上時，我使用javascript將完整列表中的選項複製到縮小列表中。代碼如下所示。

HTML：

<select id="Title"> 
    <option value="">Select...</option> 
    <option value="MR">Mr</option> 
    <option value="MISS">Miss</option> 
    <option value="MRS">Mrs</option> 
    <optgroup label="Other">Other</optgroup> 
</select> 

<select id="FullTitle" style="display:none"> 
    <option value="">Select...</option> 
    <option value="MR">Mr</option> 
    <option value="MISS">Miss</option> 
    <option value="MRS">Mrs</option> 
    <option value="MS">Ms</option> 
    <option value="DR">Doctor</option>   
</select>

的Javascript：

<script type="text/javascript"> 
      $('select').find('optgroup').hover(
       function() { 
       var parent = $(this).parent() 
       var selected = parent.find('option:selected').val() 
       var id = "#Full" + parent.attr('id')     
       parent.html($(id).html()) 
       parent.find('option[value="'+ selected +'"]').attr('selected', 'selected') 
       }) 
     </script>

這工作得很好，在Firefox，但在任何IE或Chrome不起作用。我不知道爲什麼。

我想知道是否有人知道爲什麼這不起作用或更好的方法來解決我的問題？

來源

2013-01-07 Andrew Beal

除了技術限制之外，這真的是用戶期望的東西嗎？有時候，簡單會更好。有時候，我的意思是平時。 – Halcyon

我同意你的意見。但是對於這個項目，我們已經被用戶請求了，因爲他們想要一個大約20個不同標題的列表。其中大部分只能在藍色月亮中使用一次 –

您可以簡單地對頂部最常見的選項列表進行排序。在''中排列附加選項。 – Halcyon

懸停事件不會觸發IE和Chrome中的選項。有一些腳本，可以嘗試可能做到這一點，我已經看到其他職位在這個網站它還有：

jquery hover event doesn't work with select option tag in google chrome?

從我所看到的，這個轉換成DIV/UL並使用css/jquery使它看起來像一個選擇列表可能是你最好的選擇。

來源

2013-01-07 15:53:40 sgeddes

我想我會在這之前完成它，並添加代碼。謝謝 –

祝你好運 - 這裏有幾個帖子可以幫助你開始：http://stackoverflow.com/questions/9716212/can-i-use-ul-li-instead-of-select-dropdown-and -with-jquery-make-it-part-of-a-for和http://stackoverflow.com/questions/11761273/jquery-how-to-cut-li-elements-from-one-ul-to-another -ul – sgeddes

創建用戶將鼠標懸停在選項上時展開的選擇下拉列表

回答

相關問題