12306 도시 선택 상자

클릭하여 효과 보기
1. 페이지 구조:

 <div style="width: 26%;margin:100px auto;">

            ：<input type="text" id="txt_value" /><br/> <br/>

        <div class="yxcdv1" style="width: 100%;">

            <div class="ac_title">

                <span>         </span> <a class="ac_close" style="cursor: pointer" title="  " id="yxcclose">

                </a>

            </div>

            <ul class="AbcSearch clx" id="abc">

                <li index="1" id="nav_list1" class="action">A－E</li>

                <li index="2" id="nav_list2" class="">F－J</li>

                <li index="3" id="nav_list3" class="">K－O</li>

                <li index="4" id="nav_list4" class="">P－T</li>

                <li index="5" id="nav_list5" class="">U－Z</li>

            </ul>

            <ul class="popcitylist" style="overflow: scroll; max-height: 300px; height: 300px;

                display: block;" id="ul_list1">

                <li class="ac_even itemLi" title="  " data="beijing" category="1" >  </li>

                <li class="ac_even itemLi" title="  " data="chongqing" category="1">  </li>

            </ul>

            <ul class="popcitylist" style="overflow: scroll; max-height: 300px; height: 300px;

                display: none;" id="ul_list2">

                <li class="ac_even itemLi" title="  " data="guangzhou" category="2">  </li>

                <li class="ac_even itemLi" title="  " data="guangxi" category="2">  </li>

            </ul>

            <ul class="popcitylist" style="overflow: scroll; max-height: 300px; height: 300px;

                display: none;" id="ul_list3">

            </ul>

            <ul class="popcitylist" style="overflow: scroll; max-height: 300px; height: 300px;

                display: none;" id="ul_list4">

            </ul>

            <ul class="popcitylist" style="overflow: scroll; max-height: 300px; height: 300px;

                display: none;" id="ul_list5">

            </ul>

            <ul class="popcitylist" style="max-height: 300px; height: 300px; display: none; text-align: center;

                line-height: 300px;" id="ul_list0">

                       

            </ul>

        </div>

    </div>

2、JS

  <script type="text/javascript">

        $(function () {

            $(".itemLi").click(function () {

                var showTxt = $.trim($(this).text());

                $("#txt_value").val(showTxt);

            });

            $("#abc li").click(function () {

                var categoryIndex = $(this).attr("index");

                showLi(categoryIndex);

            });

            var cityList = [];



            (function () {

                $(".itemLi").each(function () {

                    var citypinyin = $(this).attr("data") + "-" + $(this).attr("category");

                    cityList.push(citypinyin);

                });

            })();



            $("#txt_value").keyup(function () {

                var v = $.trim($(this).val()).toLocaleLowerCase();

                toChange(v);

            });



            function toChange(searchTxt) {

                var cityPinYin = "";

                var categoryIndex = 0;



                if (searchTxt) {

                    $(".itemLi").css("color", "");

                    for (var index in cityList) {

                        var cityPY = cityList[index];

                        // document.title = cityPY.indexOf(searchTxt);

                        if (cityPY.indexOf(searchTxt) == 0) {

                            cityPinYin = cityPY.split('-')[0];

                            categoryIndex = cityPY.split('-')[1];

                            $(".itemLi").each(function () {

                                if ($(this).attr("data") == cityPinYin) {

                                    $(this).css("color", "red");

                                }

                            });

                        }



                    }

                }

                else { categoryIndex = 1; }

                showLi(categoryIndex);

            }



            function showLi(categoryIndex) {

                $(".popcitylist").hide();

                if (categoryIndex == 0) {



                    $("#ul_list0").show();

                }

                else {

                    $("#abc li").removeClass("action");

                    $("#nav_list" + categoryIndex).addClass("action");

                    $("#ul_list" + categoryIndex).show();



                }

            }



        })

    </script>