//三级联动
省/直辖市<select id="province"></select>
市/省直辖<select id="city"></select>
县/区 <select id="area"></select>
<!-- JQuery方式 -->
<script type="text/javascript">
$().ready(function() {
var coco = "coco";
//ajax
$.ajax({
url: "Test",
dataType: "json",
data: {myName: "coco"},
success: function(data) {
for(var i=0;i<data.length;i++) {
alert(data[i].city + data[i].id);
}
}
});
// getJSON
$.getJSON('Test', function(data) {
alert(data)
alert(data[1].city)
alert(data[0].id)
});
});
</script>
<!-- JS方式 -->
<script type="text/javascript">
window.onload = function() {
var req;
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}else {alert("您的浏览器版本太旧咯");}
if(req) {
req.open("post", "Test", true);
req.send(null);
req.onreadystatechange = function() {
if(req.readyState == 4) {
if(req.status == 200) {
var data = eval('('+req.responseText+')');
var province = document.getElementById("province");
for(var i=0;i<data.length;i++) {
province.options.add(new Option(data[i].city, data[i].id));
}
var city = document.getElementById("city");
var option = document.createElement("option");
option.value = 1;
option.innerHTML = "北京";
city.appendChild(option);
}else {
alert("现在的状态" + req.statusText);
}
}else {
document.getElementById("province").innerText = "加载中...";
}
}
}
}
</script>
js三级联动下拉框
最新推荐文章于 2023-09-23 13:15:52 发布