可供选数据：
var toplevel={50900000:"家用电器"};
var secondlevel = {
50900000:{50900004:"大家电",50892008:"厨房电器",50894004:"影音视听",50886005:"个人护理/保健按摩"}
}
var thirdlevel = {
50900004:{50930001:"空调",50918004:"冰箱"}
}
js：
var topObj="toplevel";
var secondObj="secondlevel";
var thirdObj="thirdlevel";
var firstValue = 0;
var secondValue = 0;
var thirdValue = 0;
function localDefind(){
$("<option value='0'>请选择</option>").appendTo($("#"+topObj));
//for (var i = 0,n=toplevel.length; i < n; i++)
for(var i in toplevel)
{
$("<option value='"+i+"' >"+toplevel[i]+"</option>").appendTo($("#"+topObj));
//$("<option value='"+toplevel[i].key+"' >"+toplevel[i].value+"</option>").appendTo($("#"+topObj));
}
$("<option value='0'>请选择上一级</option>").appendTo($("#"+secondObj));
$("<option value='0'>请选择上一级</option>").appendTo($("#"+thirdObj));
}
function appendToTarget(key,value,target){
$("<option value='"+key+"' >"+value+"</option>").appendTo($("#"+target));
}
function setSelect(select,obj,target){
for (var i = 0 in obj)
{
if(i==select){
$("<option value='"+i+"' selected='selected' >"+obj[i]+"</option>").appendTo($("#"+target));
}else{
$("<option value='"+i+"' >"+obj[i]+"</option>").appendTo($("#"+target));
}
}
}
function initSelected(topValue,secValue,thiValue)
{
if(topValue==0){
localDefind();
}else{
setSelect(topValue,toplevel,topObj);
setSelect(secValue,secondlevel[topValue],secondObj);
setSelect(thiValue,thirdlevel[secValue],thirdObj);
}
$("#"+topObj).change(function(){
firstValue = $("#"+topObj).val();
$("#"+secondObj).empty();
if(firstValue==0){
localDefind();
}else{
var newObj=secondlevel[firstValue];
if(newObj!=null)
{
$("<option value='0'>请选择</option>").appendTo($("#"+secondObj));
for(var i in newObj){
appendToTarget(i,newObj[i],secondObj);
}
}else{
$("<option value='0'>无选择项</option>").appendTo($("#"+secondObj));
}
}
});
$("#"+secondObj).change(function(){
secondValue = $("#"+secondObj).val();
$("#"+thirdObj).empty();
if(secondValue==0){
$("<option value='0'>请选择上一级</option>").appendTo($("#"+thirdObj));
}else{
var newObj=thirdlevel[secondValue];
if(newObj!=null){
$("<option value='0'>请选择</option>").appendTo($("#"+thirdObj));
for(var i in newObj){
appendToTarget(i,newObj[i],thirdObj);
}
}else{
$("<option value='0'>无选择项</option>").appendTo($("#"+thirdObj));
}
}
});
};
$(document).ready(
function(){ initSelected("50900000","50900004","50918004");}
);
html页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
#toplevel{ width:90px; margin-left:5px}
#secondlevel{ width:130px; margin-left:5px}
#thirdlevel{ width:160px; margin-left:5px}
</style>
</head>
<body>
<select id="toplevel"></select>
<select id="secondlevel"></select>
<select id="thirdlevel"></select>
</body>
</html>
分享到：
相关推荐
本项目"基于layui开发的省市区三级联动下拉框"是一个典型的前端组件开发实例，它利用layui和vue.js来实现地理信息的三级联动选择功能。 首先，我们来了解一下layui。layui是一款中国本土的开源前端框架，它提供了...
综上所述，"ajax后台可编辑的省市区三级联动"是一个涉及到前端交互、后台处理和数据库操作的综合功能。通过合理的前后端设计和AJAX技术，可以为用户提供便捷、直观的省市区选择体验。而"sheng"这个文件可能包含了...
在网页开发中，"jQuery 实现省市县三级联动"是一个常见的功能需求，尤其在构建具有地理定位信息的网站或应用时。这个功能允许用户在选择省份后，市和县（或区）的下拉列表会自动更新，显示出与之相关的选项，提供了...
本项目"小程序三级联动.zip"正是针对这一功能的实现，包含了JS逻辑处理、WXML结构布局以及可能的JSON配置文件。 首先，JS.txt文件是JavaScript代码，它是小程序业务逻辑的核心部分。在这个案例中，JS文件主要负责...
本主题将深入探讨“WPF DataGrid 城市三级联动”这一概念，它涉及到如何实现一个具有省、市、区三级选择功能的交互式界面。 在城市三级联动中，用户首先选择一个省份，接着根据所选省份动态加载对应的市，最后在...
使用`xls-to-json`，你可以轻松将Excel表格的数据转换成更适合前端应用的JSON格式，这在构建动态网站或者移动应用时非常方便，比如在城市选择组件中实现三级联动效果。 4. **数据处理与应用**： 这些城市数据可以...
在Android开发中，"ExpandableListView实现省市区三级联动"是一个常见的需求，特别是在涉及地理位置信息的应用中。这个功能允许用户通过选择省、市、区来定位他们的位置，或者输入配送地址。下面我们将深入探讨如何...
最后，"省市区三级联动"是指在表单中，当用户选择一个省份时，相关的城市会自动加载；选择城市后，对应的区县也会自动显示。这是一种典型的动态下拉列表，利用JavaScript根据用户的选择动态请求和填充数据，提升用户...
在Android应用开发中，"WhellViewDemo三级联动"是一个典型的用户界面设计示例，它展示了如何通过联动控件实现年、月、日以及省、市、区的多级选择功能。这种设计常见于日期选择器或者地址选择器中，为用户提供了一种...
在这个特定的项目中，"省市县三级级联"是指在一个Web应用中实现省、市、县（或区）的三级联动选择功能，这在地址输入或区域划分等场景中非常常见。这个功能的实现通常涉及到前端的交互和后端的数据处理。 前端部分...
为了实现三级联动效果，我们通常会在UI上设置三个下拉选择框（picker view或segment control），当用户在第一级选择省份时，第二级选择框根据所选省份加载对应的城市，同理，第三级选择框则显示选定城市的区县。...
本篇文章将深入探讨`picker`组件在实现省市二级联动以及修改时回显的效果，这对于构建交互良好的用户界面至关重要。 一、`picker`组件基本使用 `picker`组件是微信小程序内置的一种UI组件，它为用户提供了一个滚动...
在本主题“MVC多级下拉联动，带编辑功能”中，我们将探讨如何在MVC框架下实现多级下拉菜单的联动效果，并且这些下拉菜单具备编辑功能。多级下拉联动常见于需要层次结构选择的场景，如地区选择、组织架构等，用户可以...
这个展示之后还可三级联动--编辑页面。如果是详情页面只需要显示名称，不需要联动的话，需要改一下。我在详情这个页面懒得改了，用了笨的方法，把三级选择框隐藏了起来，然后获取对应的text赋给要展示的<input>...
在IT行业中，尤其是在Web开发领域，经常会遇到需要实现地区级联选择的功能，例如中国的省市区三级联动。这个项目就是基于jQuery和PHP实现这样一个功能的例子。下面将详细解释这个项目的相关知识点。 1. **jQuery**:...
"省市区三级联动自关联表数据"是一种常见的数据结构，广泛应用于电商、物流、地图服务等领域，用于实现用户选择地址时的省-市-区级联效果。这种数据通常包括中国所有省份、城市和区县的信息，通过关联结构使得查询和...
在“echarts3-中国省市县级三级地图json（含使用demo”这个压缩包中，我们主要关注的是ECharts 3在中国地图的省、市、县三级展示及其交互功能的实现。 首先，该压缩包包含的“省级地图”、“市级地图”和“县级地图...
为了实现“样式可自由编辑”，前端开发者可以使用CSS来定制联动选择器的外观，包括颜色、字体、布局等。此外，现代前端框架如React、Vue或Angular也提供了丰富的组件库，可以方便地调整组件样式。 6. **性能优化**...
- **三级联动**：地点联动选择通常涉及省、市、区/县三个层次，用户在选择一个地点时，上一级的选择会影响到下一级的选项。例如，当用户选择了一个省份，接下来显示的市列表将仅包含该省份内的城市。 - **Location...
全国行政区划数据是信息化系统中不可或缺的部分，尤其在地理信息系统、物流配送、电子商务等领域，用于实现地址选择的三级或五级联动效果。2019版全国行政区划数据库提供了全面的省、市、县、区、街道级别的行政区域...