引导'选择'样式，使用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'); 
})