<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>
Related Scripts
$("#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);
});
});
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.