Wie kann ich die Option zum Auswählen von Tags in die Schaltflächengruppe ändern?

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> 

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

Answer 1

Button-Gruppen in Bootstrap sind eine Möglichkeit, Tasten nacheinander angezeigt werden soll. In jQuery, über alle Optionen iterieren, und für jede von ihnen fügen Sie ein Schaltflächenelement in eine Schaltflächengruppe ein. Am Ende, magisch das select-Tag entfernen.

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