list-group in form element - bootstrap 3

Question

我在窗體上閱讀了窗體和支持控件的Bootstrap 3文檔。我可以使用<select>和<select multiple>。

但我想要一個更好的選擇框，就像list-group類的bootstrap一樣。 list-group可以呈現物品，而<select>只能有文字<option> s。

其主要思想是讓我可以做$("form").serializeArray()並將其全部作爲JSON，如果我將list-group作爲表單控件粘貼，這顯然不起作用。

關於如何做到這一點的任何想法？ 謝謝。

Answer 1

你爲什麼不用jQuery創建你需要的東西？

小提琴：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; 
} 

結果：自舉清單組，誰是與你的選擇