三级联动js,jQuery的实现方法

三级联动（省-市-县）

     1,获取包含省-市-县的js文件：http://download.csdn.net/detail/dengxt/9657613

         下载好js文件，引入到你的工程目录下，

             <script src="widget/phone/sjld.js"></script>

     2,三级联动的选择框<select></select>    下面是采用jqm框架里面的一个select 

          <div data-role="fieldcontain">
                <label for="job">居住地：</label>
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <select id="s_province" name="s_province" data-icon="false" value=""></select>  
                    <select id="s_city" name="s_city" data-icon="false" value=""></select>  
                    <select id="s_county" name="s_county" data-icon="false" value=""></select>
                </fieldset>
          <div id="show"></div>
        </div>

     3，初始化：里面包含注释的一部分，原本是没有注释的，但是在选择框内容发生变化的时候其他的不能随着变化，所以只留下一个_init_area()初始化方法与js文件里面相对应；             

            <script type="text/javascript">
                  _init_area();
                  //var Gid  = document.getElementById ;
                  //var showArea = function(){
                  //Gid('show').innerHTML = "<h3>省" + Gid('s_province').value + " - 市" + 	
                  //Gid('s_city').value + " - 县/区" + 
                  //Gid('s_county').value + "</h3>"
                 //}
               //Gid('s_county').setAttribute('onchange','showArea()');
            </script>

      4，

               上图是做好的效果，出现的问题是当点击省的时候县和市都不发生变化，而点击选择地级市的时候，县也不会变化，为此在window.onload(function(){    });  或者在$().ready(function(){  });加入代码：

       

 $(document).ready(function(){
       var str="{#address#}";//从数据库获取的省市县的字符串
       $('#s_province').val(str.substring(0,str.indexOf(','))).change();
        $('#s_city').val(str.substring(str.indexOf(',')+1,str.lastIndexOf(','))).change();
        $('#s_county').val(str.substring(str.lastIndexOf(',')+1));
    //上面是从数据库赋值
       $('#s_province').change(function(){
          $('#s_city').selectmenu("refresh").change(); //当省发生变化的时候市也发生变化
        });
        $('#s_city').change(function(){
          $('#s_county').selectmenu("refresh"); //当市发生变化得时候县也发生刷新变化
        });
      });

        上面的代码解决了相互不关联的问题。