js地区联动数组。求指教

JavaScript011

js地区联动数组。求指教,第1张

<script type="text/javascript">       

       function pp() {

           var s = document.getElementById("s2").value

           var ah = new Array("安庆", "蚌埠", "巢湖", "池州", "滁州", "阜阳", "合肥", "淮北", "淮南", "黄山", "六安", "马鞍山", "宿州", "铜陵", "芜湖", "宣城", "亳州")

           var js = new Array("常州", "淮安", "连云港", "南京", "南通", "苏州", "宿迁", "泰州", "无锡", "徐州", "盐城", "扬州", "镇江")

           var sc = new Array("阿坝", "巴中", "成都", "达州", "德阳", "甘孜", "广安", "广元", "乐山", "凉山", "眉山", "绵阳", "南充", "内江", "攀枝花", "遂宁", "雅安", "宜宾", "资阳", "自贡", "泸州")

           if (s == "0") {

               for (var i = 0i <ah.lengthi++) {

                   document.getElementById("s3").options[i] = new Option(ah[i] + 1 + "日")

               }

           }

       }

          

   </script>

<div class="address">

       <span>地址:</span>

       <select id="s1">

           <option>中国</option>

       </select>

       <select id="s2" onchange="javascript:pp()">

           <option value="">省份、州</option>

           <option value="0">安徽</option>

           <option value="1">江苏</option>

           <option value="2">四川</option>

       </select>

       <select id="s3">

           <option>市、县</option>

       </select>

   </div>

页面中获取值并判断的js如下:

<script type="text/javascript">

//这个函数是必须的,因为在area.js里每次更改地址时会调用此函数

function promptinfo()

{

var address = document.getElementById('address')

var s1 = document.getElementById('s1')

var s2 = document.getElementById('s2')

var town1 = document.getElementById('town1')

HTML

首先在head中载入jquery库和cityselect插件。

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.cityselect.js"></script>

接下来,我们在#city中,放置三个select,并且三个select分别设置class属性为:prov、city、dist,分别表示省、市、区(县)三个下拉框。注意如果只想实现省市二级联动,则去掉第三个dist的select即可。

<div id="city">

<select class="prov"></select>

<select class="city" disabled="disabled"></select>

<select class="dist" disabled="disabled"></select>

</div>

jQuery

调用cityselect插件非常简单,直接调用:

$("#city").citySelect()

自定义参数调用,设置默认省市区。自定义参数调用,设置默认省市区。

$("#city").citySelect({

url:"js/city.min.js",

prov:"湖南", //省份

city:"长沙", //城市

dist:"岳麓区", //区县

nodata:"none" //当子集无数据时,隐藏select

})

当然,你还可以扩展,自定义下拉列表选项数据,你可以根据需要设置下拉内容,注意数据格式一定要为JSON格式。

$("#city").citySelect({

url:{"citylist":[

{"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},

{"n":"JAVASCIPT"}]},

{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]},

{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]},

]},

prov:"",

city:"",

dist:"",

nodata:"none"

})

你还可以利用PHP等后台语言将数据库中的数据转换成JSON格式,然后使用url参数指向后台地址也能实现无刷新联动效果。

$("#city").citySelect({

url:"data.php"

})