悟心

<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 = {
                北京:{北京:"東城,西城,海淀,宣武,豐臺"},
                江蘇:{南京:"江寧,六合,下關(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>請選擇</option></select>
       <select id="city"><option>請選擇</option></select>
       <select id="county"><option>請選擇</option></select>
</body>
</html>

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


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




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

悟心

常用鏈接

留言簿(2)

隨筆分類(91)

隨筆檔案(92)

文章檔案(1)

新聞檔案(5)

相冊

1

搜索

最新評論

閱讀排行榜

評論排行榜

評論