三级联动(省-市-县)
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"); //当市发生变化得时候县也发生刷新变化
});
});
上面的代码解决了相互不关联的问题。