如何将选择标签选项更改为按钮组？答案

【问题标题】：How can i change select tag option into button group?如何将选择标签选项更改为按钮组？
【发布时间】：2016-10-24 07:30:57
【问题描述】：

<div class="form-group">
         <label>Select Duration</label>
           <select name="plan_duration" id="plan_duration" class="selectpicker show-tick form-control" data-live-search="true" style="width:100%;">

            </select>
 </div>

相关脚本

$("#plan_name").change(function()
{
       $.getJSON("getduration.php?city="+ $(this).val(), success = function(data)
       {
       var options = "";
       for(var i = (0); i < data.length; i++)
           {
             options += "<option>" + data[i] + "</option>";

           }
       $("#plan_duration").html("");
       $("#plan_duration").append('<option>-Select Duration-</option>');
       $("#plan_duration").append(options);
       $("#plan_duration").selectpicker('refresh');
       console.log(options);    
       });
});

【问题讨论】：

选择代码运行正常我只想知道如何将选择选项转换为按钮组？

标签： jquery select button option buttongroup

【解决方案1】：

引导程序中的按钮组是一种连续显示按钮的方法。在 jQuery 中，遍历所有选项，并为每个选项插入一个按钮元素到按钮组中。最后，神奇地移除选择标签。

$("#convert").on("click", function() {
    var btnGroup = "<div class='btn-group'></div>";
    $("body").append(btnGroup);

    $("option").each(function() {
        $(".btn-group").after("<button>" + $(this).html() + "</button>");
    });

    $("#fruit-select").remove();
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="fruit-select">
  <option>Pineapples</option>
  <option>Mangos</option>
  <option>Watermelons</option>
</select>

<button id="convert">Convert to Button Group</button>

【讨论】：