更小和更好用bootstrap.css選擇

Question

當然，我知道SELECT表單元素很難在樣式和/或修改之外進行修改。

只是出於好奇，有沒有人知道一次性引導（一個來自twitter）的解決方案，這將允許我影響SELECT的大小，甚至可能應用漸變看起來更像一個引導按鈕（比他們現在的沙啞表面）。

我不介意用CSS自己兜兜轉轉，但我想我會在重新發明輪子之前詢問一下。

任何指針，鏈接或建議將不勝感激。

Answer 1

你可以使用我的jQuery插件：

http://silviomoreto.github.com/bootstrap-select/

它將把你選入引導按鈕下拉

Answer 2

有點晚，但也許這可以幫助http://blog.iamjamoy.com/docs/select.html

或本http://ivaynberg.github.com/select2/

第一個doesn't工作的IE瀏覽器，如果你能解決這個問題，請提供。

Answer 3

jQuery(function($){ 
     $('select').each(function(i, e){ 
      if (!($(e).data('convert') == 'no')) { 
       //$(e).hide().wrap('<div class="btn-group" id="select-group-' + i + '" />'); 
       $(e).after('<div class="btn-group" id="select-group-' + i + '" />'); 
       var select = $('#select-group-' + i); 
       var current = ($(e).val()) ? $(e).val(): '&nbsp;'; 
       select.html('<input type="hidden" value="' + $(e).val() + '" name="' + $(e).attr('name') + '" id="' + $(e).attr('id') + '" class="' + $(e).attr('class') + '" /><a class="btn" href="javascript:;">' + current + '</a><a class="btn dropdown-toggle" data-toggle="dropdown" href="javascript:;"><span class="caret"></span></a><ul class="dropdown-menu"></ul>'); 
       $(e).find('option').each(function(o,q) { 
        select.find('.dropdown-menu').append('<li><a href="javascript:;" data-value="' + $(q).attr('value') + '">' + $(q).text() + '</a></li>'); 
        if ($(q).attr('selected')) select.find('.dropdown-menu li:eq(' + o + ')').click(); 
       }); 
       select.find('.dropdown-menu a').click(function() { 
        select.find('input[type=hidden]').val($(this).data('value')).change(); 
        select.find('.btn:eq(0)').text($(this).text()); 
       }); 
       $(e).remove(); 
      } 
     }); 
    });