Css jquery Combobox

Question

我想創建一個與CSS和jQuery的組合框。我將有3個項目，我需要幫助選擇組合框中的項目並顯示所選項目。任何幫助將不勝感激。我完整的代碼是

http://jsfiddle.net/vmCBJ/

$(function() { 
     $('#clickIcon').click(function() { 

     }); 
     $("ul.dropdown li").click(function() { 
      $(this).addClass("hover"); 
      $('ul:first', this).css('visibility', 'visible'); 

     }, function() { 

      $(this).removeClass("hover"); 
      $('ul:first', this).css('visibility', 'hidden'); 

     }); 

     $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » "); 

    }); 


<div id="page-wrap"> 
    <span> 
     <ul class="dropdown"> 
      <li><a href="#">Cannot</a> 
       <ul class="sub_menu"> 
        <li> 
         <a href="#">Can</a> 
        </li> 
        <li> 
         <a href="#">Must</a> 
        </li> 

       </ul> 
      </li> 

     </ul> 
    </span> 
    <span id="clickIcon" style="background-color: gray;padding-left: 5px;font-weight: 900;"> 
     V 
    </span> 
</div> 

Answer 1

我的解決方案...... http://jsfiddle.net/K2ndZ/

我已經重建了這樣的功能應該是相當清楚的。但是，您應該意識到，如果用戶的瀏覽器中沒有JavaScript，此解決方案將崩潰​​...下拉菜單不是更好的選擇嗎？

HTML

<div class="combobox"> 
    <div class="selector">Please select</div> 
    <ul> 
     <li>Option 1</li> 
     <li>Option 2</li> 
     <li>Option 3</li> 
    </ul> 
</div> 

CSS

.combobox {cursor:pointer;display:inline-block;} 
.combobox .selector{border:1px solid #cccccc;padding: 2px 5px} 
.combobox ul {padding:0;margin:0;display:inline-block;border:1px solid #eeeeee;background-color:#cccccc;} 
.combobox li {padding: 2px 5px} 

jQuery的

$(document).ready(function(){ 
    $('.combobox ul').hide(); 
    $('.combobox').hover(
     function(){ 
      $(this).find('ul').stop().slideDown(); 
     }, 
     function(){ 
      $(this).find('ul').stop().slideUp(); 
     } 
    ); 
    $('.combobox li').click(function(){ 
     $(this).parents('.combobox').find('.selector').text($(this).text()); 
    }); 
}); 

Answer 2

StackOverflow的不發，所以我們可以爲你寫的代碼。你需要自己做一些研究。您需要的不僅僅是顯示列表中的哪個項目「活動」，以便製作出適當的工作組合框。順便說一下，combobox對於你所做的並不合適。這更像是一個自定義下拉菜單。

我更新了您的代碼（完全不在實時環境代碼中使用）以指引您的方向。 http://jsfiddle.net/vmCBJ/1/

我做了什麼：

$(".sub_menu a").click(function() { 
     var currentItem = $(this).text(); 
     $active = $('.dropdown a').first(); 
     $(this).text($active.text()); 
     $active.text(currentItem); 

     return false; 
    }); 

抓子菜單中單擊事件。將「已單擊」項目中的文本保存在變量中。找到「活動」元素（子菜單之外的元素），並將文本交換爲您單擊「活動」的文本。

這並沒有真正彌補了良好的組合框雖然:)