知识大全简单实用jquery版三级联动select示例

Posted 2022-07-20 知

篇首语：学而不厌，诲人不倦。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全简单实用jquery版三级联动select示例相关的知识，希望对你有一定的参考价值。

本文主要为大家介绍下通过jquery实现三级联动select这里用到的json文件只是事例根据情况添加或编写感兴趣的朋友可以参考下哈希望对大家有所帮助

　　和js部分

复制代码代码如下: <!DOCTYPE > <> <head> <meta charset=gbk /> <title>selectList</title> <style type=text/css> *margin: ;padding: ; selectListwidth: px;margin: px auto; </style> <script type=text/javascript src=jquery js></script> </head> <body> <div > <select > <option>请选择</option> </select> <select > <option>请选择</option> </select> <select > <option>请选择</option> </select> </div> <div > <select > <option>请选择</option> </select> <select > <option>请选择</option> </select> <select > <option>请选择</option> </select> </div> <script type=text/javascript> $(function() $(" selectList") each(function() var url = "area json"; var areaJson; var temp_; var oProvince = $(this) find(" province"); var oCity = $(this) find(" city"); var oDistrict = $(this) find(" district"); //初始化省 var province = function() $ each(areaJson function(i province) temp_+="<option value="+province p+" >"+province p+"</option>"; ); oProvince (temp_); city(); ; //赋值市 var city = function() temp_ = ""; var n = oProvince get( ) selectedIndex; $ each(areaJson[n] c function(i city) temp_+="<option value="+city ct+" >"+city ct+"</option>"; ); oCity (temp_); district(); ; //赋值县 var district = function() temp_ = ""; var m = oProvince get( ) selectedIndex; var n = oCity get( ) selectedIndex; if(typeof(areaJson[m] c[n] d) == "undefined") oDistrict css("display" "none"); else oDistrict css("display" "inline"); $ each(areaJson[m] c[n] d function(i district) temp_+="<option value="+district dt+" >"+district dt+"</option>"; ); oDistrict (temp_); ; ; //选择省改变市 oProvince change(function() city(); ); //选择市改变县 oCity change(function() district(); ); //获取json数据 $ getJSON(url function(data) areaJson = data; province(); ); ); ); </script> </body> </>

　　 json文件（area json）这里只是事例根据情况添加或编写

复制代码代码如下: [ "p":"江西省" "c":[ "ct":"南昌市" "d":[ "dt":"西湖区" "dt":"东湖区" "dt":"高新区" ] "ct":"赣州市" "d":[ "dt":"瑞金县" "dt":"南丰县" "dt":"全南县" ] ] "p":"北京" "c":[ "ct":"东城区" "ct":"西城区" ] "p":"河北省" "c":[ "ct":"石家庄" "d":[ "dt":"长安区" "dt":"桥东区" "dt":"桥西区" ] "ct":"唐山市" "d":[ "dt":"滦南县" "dt":"乐亭县" "dt":"迁西县" ] ] ] cha138/Article/program/Java/Javascript/201311/25292

知识大全 简单实用jquery版三级联动select示例

知识大全简单实用jquery版三级联动select示例