<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery学习系统-事件切换之三级联动的运用</title>
<link href="/res/common.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.clsInit{
width:500px;
height:35px;
line-height:35px;
padding-left:10px;
}
.clsTip{
padding-top:5px;
background-color:#EEE;
}
.btn{
border:1px solid #666;
padding:2px;
width:65px;
float:right;
margin-top:6px;
margin-right:6px;
}
</style>
<script type="text/javascript" src="/res/jquery-1.6.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function objInit(obj){
return $(obj).html('<option>请选择</option>');
}
var arryData={
厂商1: {
品牌1_1:"型号1_1_1,型号1_1_2",
品牌1_2:"型号1_2_1,型号1_2_2,型号1_2_3",
品牌1_3:"型号1_3_1,型号1_3_2,型号1_3_3,型号1_3_4"
},
厂商2: {
品牌2_1:"型号2_1_1,型号2_1_2",
品牌2_2:"型号2_2_1,型号2_2_2,型号2_2_3",
品牌2_3:"型号2_3_1,型号2_3_2,型号2_3_3,型号2_3_4",
品牌2_4:"型号2_4_1,型号2_4_2,型号2_4_3,型号2_4_4,型号2_4_5,型号2_4_6"
},
厂商3: {
品牌3_1:"型号3_1_1,型号3_1_2,型号3_1_3,型号3_1_4,型号3_1_5,型号3_1_6,型号3_1_7",
品牌3_2:"型号3_2_1,型号3_2_2,型号3_2_3,型号3_2_4,型号3_2_5,型号3_2_6,型号3_2_7,型号3_2_8"
}
};
$.each(arryData,function(pF){//遍历数据增加厂商项
$("#selF").append('<option>'+pF+'</option>');
});
$("#selF").change(function(){//厂商项列表框改变
objInit("#selT");
objInit("#selC");
$.each(arryData,function(pF,pS){
//如果厂商选择项与数据匹配
if($("#selF option:selected").text()==pF){
$.each(pS,function(pT,pC){
$("#selT").append('<option>'+pT+'</option>');
});
//品牌列表项改变
$("#selT").change(function(){
objInit("#selC");
$.each(pS,function(pT,pC){
if($("#selT option:selected").text()==pT){
$.each(pC.split(","),function(){
$("#selC").append('<option>'+this+'</option>');
});
}
});
});
}
});
});
$("#Button1").click(function(){
var strValue="你选择的厂商：";
strValue=strValue+$("#selF option:selected").text();
strValue=strValue+"；你选择的品牌：";
strValue=strValue+$("#selT option:selected").text();
strValue=strValue+"；你选择的型号：";
strValue=strValue+$("#selC option:selected").text();
$("#divTip").show().addClass("clsTip").html(strValue);
});
});
</script>
</head>
<body>
<div align="center">
<div class="clsInit">
厂商：<select id="selF"><option>请选择</option></select>
品牌：<select id="selT"><option>请选择</option></select>
型号：<select id="selC"><option>请选择</option></select>
<input id="Button1" type="button" value="查询" class="btn"/>
</div>
<div class="clsInit" id="divTip"></div>
</div>
</body>
</html>
分享到：
相关推荐
这个"jQuery模拟select下拉框三级城市联动代码.zip"压缩包提供的就是一个使用jQuery库来实现这种效果的示例。这里我们将深入探讨相关知识点。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件...
《jQuery商品发布三级联动菜单代码详解》 在Web开发中，联动菜单是一种常见的交互设计，它通常用于导航或数据选择，特别是在商品发布系统中。这种菜单可以实现父级选项变化时，子级选项自动更新的效果，提升用户...
带select下拉选择框美化的jQuery省市区三级联动插件，网络上很多城市三级联动选择插件，但是 大部分是采用传统的select下拉框选择，本插件利用ul模拟美化select选择框，界面还是很不错的 最终选择的值会赋值到隐藏...
本项目涉及的知识点是使用jQuery来模拟一个三级联动的地区选择表单，同时实现美化效果。这种方式通常用于创建更加用户友好的交互式界面，以替代传统的HTML `<select>` 元素。 一、jQuery基础 jQuery的核心是它的...
本项目“jquery仿京东商城三级联动代码”正是一个利用jQuery实现的前端功能，它模拟了京东商城商品购买过程中地区选择的交互体验，涉及到了JavaScript、CSS样式以及DOM操作等多个关键知识点。 首先，我们来理解“三...
这个"淘宝商品发布三级联动菜单.zip"文件包含了实现这一功能的源代码，主要依赖于JavaScript库jQuery 1.9.1版本。 jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。...
该项目为一个整合hibernate与struts，利用json对象存放临时数据库数据，连接数据的三级联动；改项目使用ajax传递请求连接和参数；数据库结果为三表级联，三表之间依次都是多对一的关系；其中代码核心代码都附有详细...
本文将深入探讨如何使用jQuery来实现这样一个移动端的三级联动，非select样式，且固定底部、滑动选择的省市区选择器。 首先，我们需要理解“三级联动”的概念。它是指在一个表单中，当用户在一个下拉框（或这里所说...
在IT行业中，尤其是在前端开发领域，"仿淘宝商品发布三级联动菜单"是一个常见的需求，它涉及到用户界面（UI）设计、交互逻辑以及响应式网页技术。这个项目是基于H5（HTML5）编写的，目的是为了创建一个与淘宝网站...
在移动应用开发中，"手机移动端3D滑动省市区三级联动"是一个常见的功能需求，尤其是在用户填写地址信息时。这个功能旨在提供一种流畅、直观的用户体验，通过3D滚动效果来选择省级、市级和区级行政区域。下面将详细...
"jQuery 仿手机淘宝 省市区 三级联动"是一种常见的前端技术实现，它旨在提高用户在选择地址时的便捷性，模拟手机淘宝APP中的地区选择功能。这种功能通过JavaScript库jQuery来实现，提供一种流畅、高效的用户界面。 ...
至于"模拟三级联动select"的文件，很可能包含了一些示例代码或模板，用于演示如何创建这样的功能。这些文件可能包括HTML文件（用于构建下拉框）、CSS文件（用于样式设计）和JavaScript文件（用于实现动态加载和联动...
标题中的“省市县三级、省市二级联动菜单”指的是在网页设计中常见的下拉菜单功能，这种功能常用于地理信息选择，如用户填写地址时选择所在省份、城市和区县。这种联动效果意味着当用户在一级菜单（省份）中选择一个...
HTML5手机端三级联动城市选择代码是一种常见的网页交互设计，主要应用于移动设备上的地理选择功能。这个设计通常用于用户在填写表单时选择他们的省份、城市和区县，以提供精确的地理位置信息。以下是关于这一技术的...
如果是三级联动，还会有区县的选择，同理也会根据上两级的选择进行更新。这种联动效果通常通过JavaScript或者jQuery等前端库来实现。 下面我们将分别介绍二级和三级联动的实现步骤： 1. **二级联动：** - **HTML...
标题“li模拟的城市三级联动”指的是使用HTML的`<li>`元素来实现一个具有三级层次关系的城市选择功能。这种功能常见于网站的地址输入或搜索定位中，用户可以通过逐级选择省份、城市、区县来精确到具体位置。在...
这个“仿京东地区三级联动.zip”压缩包文件提供了一个基于jQuery的示例，帮助开发者快速构建这样的功能，提高开发效率。 首先，我们要理解什么是“三级联动”。在Web应用中，三级联动通常指的是三个下拉菜单之间...