Question

我在表单上阅读了Bootstrap 3文档，并在表单中支持控件。如需选择，我可以使用<select>和<select multiple>。

但是我想要一个更好的选择框，就像list-group类引导程序一样。 list-group可以有呈现的项目，而<select>只能有文字<option>。

主要的想法是，我可以$("form").serializeArray()并将所有内容作为JSON获取，如果我将list-group作为表单控件，这显然无效。

关于如何做的任何想法？谢谢。

Answer 1

为什么不用jquery创建你需要的东西？

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;
}

结果：一个引导列表组，链接到您的选择

表单元素中的list-group - bootstrap 3

1 个答案: