如何将 select 标签选项更改为按钮组?
How can i change select tag option into button group?
<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);
});
});
bootstrap中的按钮组是一种连续显示按钮的方式。在 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>
<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);
});
});
bootstrap中的按钮组是一种连续显示按钮的方式。在 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>