boostrap的按钮式下拉菜单结构如下:
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
可以清楚的看到选项是在<li><a> </a></li>中,而不是传统的下拉菜单<option></option>,虽然不能照搬过去的方法,但原理类似。解决思路是:
利用js动态添加选项时,给<li>动态加上选项的id,并给<a>加上点击按钮onclick事件,把选项的id和选项的值传给按钮点击事件,而在按钮点击事件里要有将按钮当前值换成传过来的选项值的方法,这样就可以实现动态添加选项,并在按钮上显示选中的选项了。
案例如下:
html代码:
<div class="btn-group ">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
<span class="directText">是否定向:</span>
<i class="icon-angle-down icon-on-right"></i>
</button>
<ul class="dropdown-menu direct">
</ul>
</div>
js代码:
/**
* 填充是否定向选择菜单
*/
var data = '[{"id":"1","name":"定向"},{"id":"2","name":"非定向"}]';
function get_direct_select() {
var d = eval("(" + data + ")");
var selectValue="";
for(var i=0;i<d.length;i++){
selectValue=$("<li id='"+d[i].id+"'><a href='#' οnclick='directBtnSelect(\""+d[i].id+"\",\""+d[i].name+"\")'>"+d[i].name+"</a></li>");
$(".direct").append(selectValue);
}
}
function directBtnSelect(id,name) {
$(".directText").html(name);
}
$(function() {
get_direct_select();
});