boostrap按钮式下拉菜单动态添加选项并在按钮上显示点击选项

boostrap的按钮式下拉菜单结构如下：

  
    Action 
  
  

    
Action
    
Another action
    
Something else here
    

    
Separated link
  

可以清楚的看到选项是在

 

中，而不是传统的下拉菜单，虽然不能照搬过去的方法，但原理类似。解决思路是：

利用js动态添加选项时，给

动态加上选项的id，并给加上点击按钮onclick事件，把选项的id和选项的值传给按钮点击事件，而在按钮点击事件里要有将按钮当前值换成传过来的选项值的方法，这样就可以实现动态添加选项，并在按钮上显示选中的选项了。

案例如下：

html代码：

				             

								
									是否定向:
									
								
								

								
					
						  
	                                            

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[i].name+"

"); $(".direct").append(selectValue); } } function directBtnSelect(id,name) { $(".directText").html(name); }

$(function() {

	get_direct_select();
	
});