表单元素中的列表组-引导3

Question

I read Bootstrap 3 documentation on form and supported controls in forms. For selection, I can use <select> and <select multiple> .

But I want a nicer select-box, exactly like list-group class bootstrap has. list-group can have rendered items, while as the <select> can only have textual <option> s.

The main idea is so that I can do $("form").serializeArray() and get all of it as JSON, which apparently will not work if I stick a list-group as a form control.

Any ideas on how to do it? Thank you.

Answer 1

Why don't you create what you need with 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;
}

Result : A bootstrap list-group, who is linked to your select