`
海欣_海夜
  • 浏览: 17241 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Jquery简单模拟三级联动

阅读更多

<%@ 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模拟select下拉框三级城市联动代码.zip"压缩包提供的就是一个使用jQuery库来实现这种效果的示例。这里我们将深入探讨相关知识点。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件...

    jQuery商品发布三级联动菜单代码.zip

    《jQuery商品发布三级联动菜单代码详解》 在Web开发中,联动菜单是一种常见的交互设计,它通常用于导航或数据选择,特别是在商品发布系统中。这种菜单可以实现父级选项变化时,子级选项自动更新的效果,提升用户...

    带select下拉选择框美化的jQuery省市区三级联动插件

    带select下拉选择框美化的jQuery省市区三级联动插件,网络上很多城市三级联动选择插件,但是 大部分是采用传统的select下拉框选择,本插件利用ul模拟美化select选择框,界面还是很不错的 最终选择的值会赋值到隐藏...

    jquery div模拟select表单地区选择三级联动美化效果

    本项目涉及的知识点是使用jQuery来模拟一个三级联动的地区选择表单,同时实现美化效果。这种方式通常用于创建更加用户友好的交互式界面,以替代传统的HTML `&lt;select&gt;` 元素。 一、jQuery基础 jQuery的核心是它的...

    jquery仿京东商城三级联动代码.zip

    本项目“jquery仿京东商城三级联动代码”正是一个利用jQuery实现的前端功能,它模拟了京东商城商品购买过程中地区选择的交互体验,涉及到了JavaScript、CSS样式以及DOM操作等多个关键知识点。 首先,我们来理解“三...

    淘宝商品发布三级联动菜单.zip

    这个"淘宝商品发布三级联动菜单.zip"文件包含了实现这一功能的源代码,主要依赖于JavaScript库jQuery 1.9.1版本。 jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。...

    城市级联之三级联动

    该项目为一个整合hibernate与struts,利用json对象存放临时数据库数据,连接数据的三级联动;改项目使用ajax传递请求连接和参数;数据库结果为三表级联,三表之间依次都是多对一的关系;其中代码核心代码都附有详细...

    jquery移动端省市区三级联动,非select,固定底部,滑动选择省市区

    本文将深入探讨如何使用jQuery来实现这样一个移动端的三级联动,非select样式,且固定底部、滑动选择的省市区选择器。 首先,我们需要理解“三级联动”的概念。它是指在一个表单中,当用户在一个下拉框(或这里所说...

    仿淘宝商品发布三级联动菜单

    在IT行业中,尤其是在前端开发领域,"仿淘宝商品发布三级联动菜单"是一个常见的需求,它涉及到用户界面(UI)设计、交互逻辑以及响应式网页技术。这个项目是基于H5(HTML5)编写的,目的是为了创建一个与淘宝网站...

    手机移动端3d滑动省市区三级联动

    在移动应用开发中,"手机移动端3D滑动省市区三级联动"是一个常见的功能需求,尤其是在用户填写地址信息时。这个功能旨在提供一种流畅、直观的用户体验,通过3D滚动效果来选择省级、市级和区级行政区域。下面将详细...

    jquery 仿手机淘宝 省市区 三级联动

    "jQuery 仿手机淘宝 省市区 三级联动"是一种常见的前端技术实现,它旨在提高用户在选择地址时的便捷性,模拟手机淘宝APP中的地区选择功能。这种功能通过JavaScript库jQuery来实现,提供一种流畅、高效的用户界面。 ...

    三级联动 下拉框

    至于"模拟三级联动select"的文件,很可能包含了一些示例代码或模板,用于演示如何创建这样的功能。这些文件可能包括HTML文件(用于构建下拉框)、CSS文件(用于样式设计)和JavaScript文件(用于实现动态加载和联动...

    省市县三级、省市二级联动菜单

    标题中的“省市县三级、省市二级联动菜单”指的是在网页设计中常见的下拉菜单功能,这种功能常用于地理信息选择,如用户填写地址时选择所在省份、城市和区县。这种联动效果意味着当用户在一级菜单(省份)中选择一个...

    HTML5手机端三级联动城市选择代码

    HTML5手机端三级联动城市选择代码是一种常见的网页交互设计,主要应用于移动设备上的地理选择功能。这个设计通常用于用户在填写表单时选择他们的省份、城市和区县,以提供精确的地理位置信息。以下是关于这一技术的...

    div模拟select框的实现省市联动三级和二级

    如果是三级联动,还会有区县的选择,同理也会根据上两级的选择进行更新。这种联动效果通常通过JavaScript或者jQuery等前端库来实现。 下面我们将分别介绍二级和三级联动的实现步骤: 1. **二级联动:** - **HTML...

    li模拟的城市三级联动

    标题“li模拟的城市三级联动”指的是使用HTML的`&lt;li&gt;`元素来实现一个具有三级层次关系的城市选择功能。这种功能常见于网站的地址输入或搜索定位中,用户可以通过逐级选择省份、城市、区县来精确到具体位置。在...

    仿京东地区三级联动.zip

    这个“仿京东地区三级联动.zip”压缩包文件提供了一个基于jQuery的示例,帮助开发者快速构建这样的功能,提高开发效率。 首先,我们要理解什么是“三级联动”。在Web应用中,三级联动通常指的是三个下拉菜单之间...

Global site tag (gtag.js) - Google Analytics