[Solved] How can i change select tag option into button group?

by


Button groups in bootstrap are a way to display buttons consecutively. In jQuery, iterate over all of the options, and for each of them insert a button element into a button group. At the end, magically remove the select tag.

$("#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>

solved How can i change select tag option into button group?