亚洲AV无码一区二区三区牛牛,jlzzjlzz亚洲jzjzjz,中文字幕专区在线亚洲

利用jQuery聯動菜單制作

<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
(function($){
$.fn.selInit = function(){return $(this).html("<option>請選擇</option>");};
$.area = function(){
        $("#province").selInit();
        $("#city").selInit();
        $("#county").selInit();
        var area = {
                北京:{北京:"東城,西城,海淀,宣武,豐臺"},
                江蘇:{南京:"江寧,六合,下關,浦口",無錫:"北塘,濱湖,江陰,宜興"}
                //

        };
        $.each(area,function(p){$("#province").append("<option>"+p+"</option>");});
        $("#province").change(function(){
                $("#city").selInit();
                $("#county").selInit();
                $.each(area,function(p,x){
                        if($("#province option:selected").text() == p)
                        {
                                $.each(x,function(c,cx){
                                        $("#city").append("<option>"+c+"</option>");
                                });

                                $("#city").bind("change",function(){
                                        $("#county").selInit();
                                        $.each(x,function(c,cx){
                                                if($("#city option:selected").text() == c)
                                                        {
                                                                $.each(cx.split(","),function(){
                                                                        $("#county").append("<option>"+this+"</option>");
                                                                });
                                                        }
                                        });
                                });
                        }
                });
        });
};
})(jQuery);
$(function(){
        $("select").css("width","100px");
        $.area();
        });
</script>
</head>
<body>
    <select id="province"><option>請選擇</option></select>
       <select id="city"><option>請選擇</option></select>
       <select id="county"><option>請選擇</option></select>
</body>
</html>

posted on 2010-07-17 12:52 艾波閱讀(2445) 評論(2) 編輯收藏所屬分類: jquery


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 關于jquery ajax return的問題 JQuery二級菜單、頭部菜單、居上的菜單、不動的菜單、css、div jquery select列表雙向選擇 jquery使用jquerydoubleselectmin.js實現二級菜單聯動利用jQuery聯動菜單制作

悟心

常用鏈接

留言簿(2)

隨筆分類(91)

隨筆檔案(92)

文章檔案(1)

新聞檔案(5)

相冊

1

搜索

最新評論

閱讀排行榜

評論排行榜

評論