버튼 그룹으로 태그 선택 옵션을 어떻게 바꿀 수 있습니까? 부트 스트랩에서

Question

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

Answer 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>