悟心

<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>請(qǐng)選擇</option>");};
$.area = function(){
        $("#province").selInit();
        $("#city").selInit();
        $("#county").selInit();
        var area = {
                北京:{北京:"東城,西城,海淀,宣武,豐臺(tái)"},
                江蘇:{南京:"江寧,六合,下關(guān),浦口",無錫:"北塘,濱湖,江陰,宜興"}
                //

        };
        $.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>請(qǐng)選擇</option></select>
       <select id="city"><option>請(qǐng)選擇</option></select>
       <select id="county"><option>請(qǐng)選擇</option></select>
</body>
</html>

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

評(píng)論

# re: 利用jQuery聯(lián)動(dòng)菜單制作 2014-09-25 16:08 N!ck

謝謝博主的例子，看書上舉的each例子，看了半天也沒理解，后來看到博主的例子，一目了然！謝謝！回復(fù) 更多評(píng)論

# re: 利用jQuery聯(lián)動(dòng)菜單制作 2016-01-16 13:50 uijkl

guil 回復(fù) 更多評(píng)論

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: 關(guān)于jquery ajax return的問題 JQuery二級(jí)菜單、頭部菜單、居上的菜單、不動(dòng)的菜單、css、div jquery select列表雙向選擇 jquery使用jquerydoubleselectmin.js實(shí)現(xiàn)二級(jí)菜單聯(lián)動(dòng) 利用jQuery聯(lián)動(dòng)菜單制作

悟心

常用鏈接

留言簿(2)

隨筆分類(91)

隨筆檔案(92)

文章檔案(1)

新聞檔案(5)

相冊(cè)

1

搜索

最新評(píng)論

閱讀排行榜

評(píng)論排行榜

評(píng)論