list-group в элементе формы - bootstrap 3

Question

Я прочитал документацию Bootstrap 3 о форме и поддерживаемых элементах управления в формах. Для выбора, я могу использовать <select> и <select multiple>.

Но я хочу более удобный select-box, точно так же, как класс bootstrap имеет. list-group может иметь визуализированные предметы, тогда как <select> может иметь только текстовые <option> s.

Основная идея заключается в том, что я могу сделать $("form").serializeArray() и получить все это как JSON, который, по-видимому, не будет работать, если я вставлю list-group в качестве элемента управления формой.

Любые идеи о том, как это сделать? Спасибо.

Answer 1

Почему вы не создаете то, что вам нужно с jquery?

Fiddle:http://bootply.com/113041

HTML:

<select id="myselect" multiple=""> 
    <option val="1">1</option> 
    <option val="2">2</option> 
    <option val="3">3</option> 
    <option val="4">4</option> 
    <option val="5">5</option> 
</select> 

JS:

$(document).ready(function(){ 
    $('#myselect').hide().after("<ul class='list-group'></ul>"); 
    $('#myselect option').each(function(){ 
      $('.list-group').append("<li class='list-group-item' opt='"+$(this).attr('val')+"'>"+$(this).html()+"</li>"); 
    }); 
    $('.list-group li').on('click', function(){ 
     $(this).toggleClass('active'); 
     var allVal = new Array(); 
     $('.list-group li.active').each(function(){ 
      allVal.push( $(this).attr('opt')); 
     }); 
     $('#myselect').val(allVal); 
    }); 
}); 

CSS:

li.active{ 
    background:cyan; 
} 

Результат: бутстраповского список-группа, которая связана с вашим выбери