bootstrap下拉框分页_bootstrap下拉框

先写html

请选择

• 1
• 2
• 3
• 4

再添加css样式来固定下拉框的宽度：

.dropdowntitle{

width:5em;

display: inline-block;

}

添加js来实现下拉列表点击事件 ：

$(".dropdown-menu").click(function(e){

e=e||window.event;

var obj=e.target||e.srcElement;

var $thisclick=$(obj);//获得当前的点击元素

if (!$thisclick.is("a")) return false;

$(this).siblings("button.dropdown-toggle").children(".dropdowntitle").text($thisclick.text());//设置下拉框的显示文本

$(this).siblings("input[type='hidden']").val($thisclick.attr("val"));//设置下拉框的值(赋在隐藏域中，由表单提交)

});

这里需要注意的是在ul上侦听列表项点击事件即可

设置默认值：

在需要设置默认值的项添加default="default"或其他自定义的属性

然后在页面加载完毕事件中添加：

$(".dropdown-menu").each(function(){

$(this).find("a[default='default']").click();

});

使用each可以对每个匹配的元素都执行这段代码，这样当页面上有多个下拉框时，默认项也能生效。