悟心

成功不是将来才有的,而是从决定去做的那一刻起,持续累积而成。 上人生的旅途罢。前途很远,也很暗。然而不要怕。不怕的人的面前才有路。
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  93 随笔 :: 1 文章 :: 103 评论 :: 0 Trackbacks
利用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 艾波 阅读(2429) 评论(2)  编辑  收藏 所属分类: jquery

评论

# re: 利用jQuery联动菜单制作 2014-09-25 16:08 N!ck
谢谢博主的例子，看书上举的each例子，看了半天也没理解，后来看到博主的例子，一目了然！谢谢！  回复  更多评论
  

# re: 利用jQuery联动菜单制作 2016-01-16 13:50 uijkl
guil  回复  更多评论
  


只有注册用户登录后才能发表评论。
网站导航: