<!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>下拉框表单联动</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
function objInit(obj){
return $(obj).html("<option>请选择</option>");
};
var arrData={
厂商1:{品牌1_1:"型号1_1_1,型号1_1_2",
品牌1_2:"型号1_2_1,型号1_2_2",},
厂商2:{品牌2_1:"型号2_1_1,型号2_1_2",
品牌2_2:"型号2_2_1,型号2_2_2",},
厂商3:{品牌3_1:"型号3_1_1,型号3_1_2",
品牌3_2:"型号3_2_1,型号3_2_2",},
};
$.each(arrData,function(pF){
$("#selF").append("<option>"+pF+"</option>");
});
$("#selF").change(function() {
objInit("#selT");
objInit("#selC");
$.each(arrData,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+=$("#selF option:selected").text();
strValue+="&nbsp;您选择的品牌：";
strValue+=$("#selT option:selected").text();
strValue+="&nbsp;您选择的型号：";
strValue+=$("#selC option:selected").text();
$("#divTip").show().html(strValue);

});

});
</script>
</head>

<body>
<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" style="display:none;"></div>
</body>
</html>

如果用Ajax传值，传过来的data循环：

$.ajax({
type:"POST",
url:"JS/parentDate.json",
dataType:"json",
success: function(data){
var select=$("#pselect");
$.each(data,function(i,info){
var option = $("<option value='"+info.id+"'>"+info.name+"</option>");
select.append(option);

});
}
});

Jquery实现下拉联动表单的更多相关文章

  1. Jquery Json 下拉联动

    #region dataTable转换成Json格式 /// <summary> /// dataTable转换成Json格式 /// </summary> /// <p ...

  2. 纯原生javascript下拉框表单美化实例教程

    html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道.但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如 ...

  3. jquery实现下拉联动

    很多项目用到这个功能,虽然写了不下5次以上了,一直没做过记录,记录一下,下次直接拷贝了,免得还得要重复写浪费时间. 先上HTML代码: 品牌: <select class="sa&qu ...

  4. jquery实现ajax提交form表单的方法总结

    本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一:  function AddHandlingFeeToRefund( ...

  5. 用NPOI导出Excel，生成下拉列表、以及下拉联动列表（第1篇/共3篇）

    最近帅帅的小毛驴遇到一个很奇葩的需求: 导出Excel报表,而且还要带下拉框,更奇葩的是,下拉框还是联动的. 小毛驴一天比较忙,所以这等小事自然由我来为她分忧了.经历了两天,做了几种解决方案,最后完美 ...

  6. DBLookupCombobox实现下拉联动

    这次用DBLookupCombobox实现省份-城市-地区的下拉联动,用以学习DBLookupCombobox的一些用法 效果图: 首先建立数据表(数据表形式可以多种多样:数据库表.文本.xml等,最 ...

  7. 用jquery写自己的form表单验证

    这几天看了锋利的jquery,感觉很不错.特别是jquery强大的选择器.今天就利用jquery写了一个自己的form表单验证的小案例.当巩固下jquery.首先贴下代码,当然只是一个小案例. 思路: ...

  8. jquery 通过submit()方法 提交表单示例

    jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...

  9. 使用jQuery，实现完美的表单异步提交

    jQuery异步提交表单 <form id="form1" method="post"> <table border="1" ...

随机推荐

  1. MVC缓存01,使用控制器缓存或数据层缓存

    对一些浏览频次多.数据量大的数据,使用缓存会比较好,而对一些浏览频次低,或内容因用户不同的,不太适合使用缓存.   在控制器层面,MVC为我们提供了OutputCacheAttribute特性:在数据 ...

  2. ManageEngine Glossary

    https://www.manageengine.com/products/applications_manager/help/glossary-applications-manager.html#s ...

  3. Android bluetooth用户自定义数据

    default mac: [btif_core.c] btif_fetch_local_bdaddr() default device name: [btif_dm.c] btif_get_defau ...

  4. JavaWeb学习之JSTL自定义标签库的使用、JSTL自定义函数库（7）

    一.自定义标签,步骤 * 确定需求 * <my:date /> 输出当前系统的时间 yyyy-MM-dd hh:mm:ss:SSS * 编写Java类 新建包名:com.yxl.tag,新 ...

  5. 栈与队列：refresh的停车场

    数据结构实验之队列一:排队买饭 Time Limit: 1000MS Memory limit: 65536K 题目描述 中午买饭的人特多,食堂真是太拥挤了,买个饭费劲,理工大的小孩还是很聪明的,直接 ...

  6. python检测文件的MD5值

    python检测文件的MD5值MD5(单向散列算法)的全称是Message-Digest Algorithm 5(信息-摘要算法),经MD2.MD3和MD4发展而来.MD5算法的使用不需要支付任何版权 ...

  7. Cube Processing Options

    在 Microsoft SQL Server Analysis Services 中处理对象时,您可以选择处理选项以控制每个对象的处理类型.  处理类型因对象而异,并基于自上次处理对象后对象所发生的更 ...

  8. 攻城狮在路上（贰） Spring（二）--- Spring IoC概念介绍

    一.IoC的概念: IoC(控制反转)是Spring容器的核心.另一种解释是DI(依赖注入),即让调用类对某一个接口的依赖关系由第三方注入,以移除调用类对某一个接口实现类的一览. 定义如此,由此可见, ...

  9. 单例模式/singleton模式/创建型模式

    Java实现要点: 私有构造方法 线程安全(并发的考虑) 延迟加载(效率的考虑,对于较大的类在使用时在加载) 公有方法访问单一实例 常见单例模式代码及问题 //无延迟加载,常驻内存(即使不使用) cl ...

  10. 通信原理实践（一）——音频信号处理

    一.信号的离散化 1.采样定理: –如果信号是带限的,并且采样频率fs超过信号最高频率的两倍,那么,原来的连续信号可以从采样样本中完全重建出来. 因此在仿真过程中,采样率(fs)是一个非常重要的参数. ...