//三级联动
省/直辖市<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>
分享到:
相关推荐
ASP(Active Server Pages...综上所述,ASP二级和三级联动下拉框的实现涉及前端HTML、JavaScript/AJAX,后端ASP处理逻辑,以及数据库操作。这种功能在很多Web应用中都有广泛应用,为用户提供更直观、更高效的交互体验。
本项目"基于layui开发的省市区三级联动下拉框"是一个典型的前端组件开发实例,它利用layui和vue.js来实现地理信息的三级联动选择功能。 首先,我们来了解一下layui。layui是一款中国本土的开源前端框架,它提供了...
本示例中提到的"简单的vue三级联动下拉框代码"是Vue.js应用场景的一个常见实例,常用于构建复杂的表单组件,如地区选择、商品分类筛选等。 一、Vue.js 三级联动下拉框基础概念 1. Vue.js:Vue.js 是一套用于构建...
本文将详细介绍如何使用HTML、JavaScript(通常配合jQuery)以及可能涉及的CSS来实现"layui-省市县三级联动下拉框"的功能,并探讨其可扩展性。 首先,`layui`是一个流行的前端UI框架,它提供了一套美观、响应式的...
下面我们将详细探讨如何使用JavaScript实现三级联动下拉框。 首先,我们需要准备HTML结构。每个下拉框(`<select>`)都需要一个唯一的ID,以便于JavaScript获取和操作它们。例如: ```html <select id="province">...
在IT领域,"AJAX版省市区三级联动下拉框"是一种常见的前端交互设计,尤其在网站表单中,用于用户选择地理位置时。这个技术基于AJAX(Asynchronous JavaScript and XML),它允许网页在不刷新整个页面的情况下与...
首先,三级联动下拉框的工作原理是基于JavaScript或jQuery等前端库来实现的。当用户在第一级下拉框中做出选择时,通过触发事件监听器,会动态更新第二级下拉框的内容;同样的,第二级的选择会影响第三级下拉框的选项...
在网页设计和开发中,"三级联动下拉框"是一种常见的交互形式,它通常用于处理层级关系的数据,如行政区划、商品分类等。这个技术的关键在于通过JavaScript或者jQuery等前端库来实现各个下拉框之间的联动效果。当用户...
### Ajax实现三级联动下拉框的关键技术点与实践 在现代Web开发中,动态加载数据并更新页面元素的能力是提升用户体验的重要手段之一。三级联动下拉框作为一个常见的交互设计,常用于显示具有层级关系的数据,如省份...
最近接触layui,比较简洁美观的一款ui,但也有很多小坑,记录一下实现省市区下拉三级联动更新回显的问题 <%--监听省份选择 --%> form.on('select(uprovinceId)', function(data){ initCityList('change')...
在网页设计中,三级联动下拉框是一种常见的交互元素,特别是在数据层级结构比较复杂的场景下,如地区选择、产品分类等。它通过三个下拉菜单的级联关系,让用户能够逐步细化选择,从大类到小类,最终精确地选取目标...
对于二级联动下拉框,这两个下拉框可能会通过JavaScript或jQuery动态更新。 3. 模型(Models):模型封装了业务数据和逻辑,为控制器和视图提供数据来源。在二级联动下拉框的场景中,模型可能包含两个列表,分别...
在IT开发领域,尤其在前端开发中,"layui-省市县三级联动下拉框效果"是一种常见的需求,常用于地址选择、区域筛选等场景。Layui是一个优秀的国产前端UI框架,它提供了丰富的组件和API,使得开发者可以方便地实现各种...
在构建省市区三级联动下拉框时,我们可以利用其提供的行政区划数据。 1. **获取数据**: 百度地图提供了JSON格式的行政区划数据,可以通过API接口获取。通常,这些数据包括省份、城市、区县等各级行政区域的信息。...
在网页设计和开发中,"省,市,区三级联动下拉框" 是一个常见的功能需求,主要用于用户在填写地址信息时提供便捷的选择方式。这种设计通常涉及到前端交互和后端数据支持,使得用户能够在选择省份后,下拉框自动更新...
在前端开发中,"jQuery全国高校三级联动下拉框"是一个常见的交互功能,它主要用于实现用户在选择高校时,根据一级、二级、三级行政区域进行筛选。这种功能常见于招生报名系统、招聘信息发布平台等,提供了便捷的用户...
"基于layui开发的省市区三级联动下拉框"是一个典型的前端组件,它利用layui框架来实现一个功能强大的交互式选择器,帮助用户在网页上便捷地选择省份、城市和区县。 layui是一款轻量级的前端UI框架,它的设计目标是...
在这个案例中,我们讨论的是如何在JavaScript环境中,利用Ajax技术实现一个基于Word版本的三级联动下拉框。 首先,我们需要在数据库中创建三个表,分别代表省份、城市和区域(区县)。这些表通常包含`id`作为主键,...
在网页开发中,"纯JS实现地区选择三级联动下拉框"是一个常见的需求,它涉及到JavaScript(JS)的基础知识、DOM操作以及事件处理等技术。下面将详细解释这个主题涉及的关键知识点。 首先,理解“三级联动”:在地区...