input 下拉框 与tab 结合的选择

先上效果：

刚开始的时候看到一个例子 ，是省、市、区三级选择的 ，做了一个，老师说效果不好，说我们这个只有二级类，直接把一级放在tab选项卡上，本来打算在找到的那个省、市、区三级选择里面改改，后来看了一下，自己没看懂，不是很好改，所以就自己写一个。在老师的指导下，用input下拉框和TAB组合。

第一次实现的时候，发现一点选项卡的文字，就跳出去了，后来就改为滑动mosemove来选择选项卡，但是又发现选项卡显示有问题，第一次显示不对，我把计算宽度的代码写在mosemove里面，应该一进来就计算宽度，把代码放出去后，发现宽度直接没发计算了，问了一下，才知道drapdown是隐藏的，一进来隐藏的对象是没有宽度的，老师提醒并给了一个计算隐藏对象的actual才能计算，就这样，可以顺利的实现以上效果。关于actual，可以查看这篇文章，http://www.cnblogs.com/catherineSue/p/6123272.html。记得引用jquery.actual.js。

<div class="input-group">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        Action <span class="caret"></span>
                    </button>
                    <div class="dropdown-menu" style="white-space: normal;">
                        <ul id="myTab" class="nav nav-tabs">
                            <li class="active"><a href="#home" data-toggle="tab">菜鸟教程 </a></li>
                            <li><a href="#ios" data-toggle="tab">iOS</a></li>
                            <li><a href="#Java" data-toggle="tab">Java</a> </li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div id="home">
                                <button style="border: 0; background-color: White" onclick="btnval(this)">
                                    菜鸟</button>
                                <button style="border: 0; background-color: White" onclick="btnval(this)">
                                    鸟</button>
                                <button style="border: 0; background-color: White">
                                    菜鸟</button>
                                <button style="border: 0; background-color: White">
                                    菜鸟</button>
                                <button style="border: 0; background-color: White">
                                    菜鸟</button>
                                <button style="border: 0; background-color: White">
                                    菜鸟</button>
                                <button style="border: 0; background-color: White" onclick="btnval(this)">
                                    菜鸟</button>
                                <button style="border: 0; background-color: White" onclick="btnval(this)">
                                    鸟</button>
                                <button style="border: 0; background-color: White">
                                    菜鸟</button>
                                <button style="border: 0; background-color: White">
                                    菜鸟</button>
                                <button style="border: 0; background-color: White">
                                    菜鸟</button>
                                <button style="border: 0; background-color: White">
                                    菜鸟</button>
                            </div>
                            <div style="display: none" id="ios">
                                <button style="border: 0; background-color: White">
                                    菜鸟</button>
                                <button style="border: 0; background-color: White">
                                    菜鸟</button>
                            </div>
                            <div style="display: none" id="Java">
                                <button style="border: 0; background-color: White">
                                    菜鸟</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /btn-group -->
                <input type="text" class="form-control" aria-label="..." id="bzfl" />
            </div>

<script type="text/javascript">
        $(document).ready(function () {
            $(".dropdown-menu li").removeClass();
            var liWidth = 0;
            $(".dropdown-menu").find("ul").each(function () {
                $(this).find("li").each(function () {
                    liWidth += $(this).actual("width");
                });
                liWidth = liWidth + 10;
                $(this).parent().animate({ 'width': liWidth + 'px' });
                liWidth = 0;
            });
            $(".dropdown-menu li").mouseover(function () {
                var liindex = $(".dropdown-menu li").index(this);
                $(this).addClass('active').siblings().removeClass('active');
                $(".tab-content div").hide().eq($(this).index()).show();
                            });
            $(".tab-content button").mousemove(function () {
                $(this).css({ "background-color": "#f1f8ff", "border-radius": "2px", "color": " #46A4FF" });
            });
            $(".tab-content button").mouseout(function () {
               $(this).css({ "background-color": "white", "border-radius": "2px", "color": "black" });
            });
        });

    </script>

中间获取宽度那块应该还能再优化，以后有时间的继续优化。