選択タグオプションをボタングループに変更するにはどうすればよいですか？ブートストラップで

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では、すべてのオプションを繰り返し処理し、それぞれに対してボタン要素をボタングループに挿入します。最後に、魔法のようにselectタグを削除してください。

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