引導'選擇'樣式，使用jquery轉換成引導下拉

Question

首先，我創建了一個選擇列表來選擇一個選項，當選擇一個選項時，使用引導手風琴部件顯示下面的其他信息。看看它是如何工作在這裏 - http://bootply.com/69516

因此，上述工作，我也希望它，但它看起來很垃圾 - 理想情況下，我希望它看起來像引導下拉框。我發現一些jquery做到這一點（下面），這裏是插入jquery的bootply fork - http://bootply.com/69518

不幸的是，它不起作用，我猜測轉換會刪除最初在選擇列表中的「值」字段。我可以通過與jquery，但仍然學習，這對我來說太多了！

jQuery(function($){ 
    $('select').each(function(i, e){ 
     if (!($(e).data('convert') == 'no')) {              
      $(e).hide().wrap('<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()); 
      }); 
     } 
    }); 
}); 

Answer 1

http://bootply.com/69711末丟失分號 - 兩個腳本所以不得不樣式它，而不是無法合併在一起。

Answer 2

你在

$('select[name="panel"]').change(function(event){ 
    var selected = $(this).find('option:selected'); 
    var value = selected.attr("value"); 
    var name= $(this).attr("name"); 
    var selector = '[for-field="'+name+'"]'; 
    $('.accordion-body'+selector).addClass('collapse'); 
    var selectorForValue = selector+'[for-value="'+value+'"]'; 
    var selectedPanel = $('.accordion-body'+ selectorForValue ); 
    selectedPanel.removeClass('collapse'); 
})