技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
jQuery实现三级省市联动的效果
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function loadXML(xmlpath){
var xmlDoc=null;
if (window.ActiveXObject){
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}else if (document.implementation && document.implementation.createDocument){
xmlDoc=document.implementation.createDocument("","",null);
}else{
alert('Your browser cannot handle this script.');
}
xmlDoc.async=false;
xmlDoc.load(xmlpath);
return xmlDoc;
}
$(function(){
var xmlDoc=null;
xmlDoc=loadXML("area.xml");
var $s1=$("#Select1");
var $s2=$("#Select2");
var $s3=$("#Select3");
// var v1=null;
// var v2=null;
// var v3=null;
var v1="上海市";
var v2="上海市";
var v3="浦东新区";
var root=$(xmlDoc).find("address")[0];
//alert(root[country]);
$(root).children("province").each(function(){
appendOptionTo($s1,$(this).attr("name"),$(this).attr("name"),v1);
});
$s1.change(function(){
$s2.html("");
var province_node=$(root).children("province")[this.selectedIndex];
$(province_node).children("city").each(function(){
appendOptionTo($s2,$(this).attr("name"),$(this).attr("name"),v2);
});
$s2.change();
}).change();
$s2.change(function(){
$s3.html("");
var province_node=$(root).children("province")[$s1[0].selectedIndex];
var city_node=$(province_node).children("city")[this.selectedIndex];
$(city_node).children("country").each(function(){
appendOptionTo($s3,$(this).attr("name"),$(this).attr("name"),v3)
});
}).change();
function appendOptionTo($o,k,v,d){
var $opt=$("<option>").text(k).val(v);
if(v==d){$opt.attr("selected", "selected")}
$opt.appendTo($o);
}
});
</script>
<style type="text/css" media="screen">
select{width:80px;}
</style>
<select id="Select1" name="Select1"></select>
<select id="Select2" name="Select2"></select>
<select id="Select3" name="Select3"></select>
share
<script type="text/javascript">
function loadXML(xmlpath){
var xmlDoc=null;
if (window.ActiveXObject){
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}else if (document.implementation && document.implementation.createDocument){
xmlDoc=document.implementation.createDocument("","",null);
}else{
alert('Your browser cannot handle this script.');
}
xmlDoc.async=false;
xmlDoc.load(xmlpath);
return xmlDoc;
}
$(function(){
var xmlDoc=null;
xmlDoc=loadXML("area.xml");
var $s1=$("#Select1");
var $s2=$("#Select2");
var $s3=$("#Select3");
// var v1=null;
// var v2=null;
// var v3=null;
var v1="上海市";
var v2="上海市";
var v3="浦东新区";
var root=$(xmlDoc).find("address")[0];
//alert(root[country]);
$(root).children("province").each(function(){
appendOptionTo($s1,$(this).attr("name"),$(this).attr("name"),v1);
});
$s1.change(function(){
$s2.html("");
var province_node=$(root).children("province")[this.selectedIndex];
$(province_node).children("city").each(function(){
appendOptionTo($s2,$(this).attr("name"),$(this).attr("name"),v2);
});
$s2.change();
}).change();
$s2.change(function(){
$s3.html("");
var province_node=$(root).children("province")[$s1[0].selectedIndex];
var city_node=$(province_node).children("city")[this.selectedIndex];
$(city_node).children("country").each(function(){
appendOptionTo($s3,$(this).attr("name"),$(this).attr("name"),v3)
});
}).change();
function appendOptionTo($o,k,v,d){
var $opt=$("<option>").text(k).val(v);
if(v==d){$opt.attr("selected", "selected")}
$opt.appendTo($o);
}
});
</script>
<style type="text/css" media="screen">
select{width:80px;}
</style>
<select id="Select1" name="Select1"></select>
<select id="Select2" name="Select2"></select>
<select id="Select3" name="Select3"></select>