JQuery中的省市联动
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>列表框中事件应用</title>
<script src="jquery-2.1.0.js"></script>
<style type="text/css">
body {
font-size:13px;
}
.clsInit {
width:435px;
height:35px;
line-height:35px;
padding-left:10px;
}
.clsTip {
padding-top:5px;
background-color:#00ffff;
display:none;
}
.btn {
border: 1px solid #666;
padding: 2px;
width: 65px;
float: right;
margin-top: 6px;
margin-right: 5px;
filter: progid:DxImageTransForm.Microsoft.Oradient(GradientType=0,StartColorStr=#fffff,EndColorStr=#ECE9D8);
} </style>
<script type="text/javascript">
$(function () {
function objInt(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) {
$("#sleF").append("<option>" + pF + "</option>");
});
$("#sleF").change(function () {
objInt("#sleT");
objInt("#sleC");
$.each(arrData, function (pF, pS) {
if ($("#sleF option:selected").text() == pF) {
$.each(pS, function (pT, pC) {
$("#sleT").append("<option>" + pT + "</option>");
});
$("#sleT").change(function () {
objInt("#sleC");
$.each(pS, function (pT, pC) {
if ($("#sleT option:selected").text() == pT) {
$.each(pC.split(","), function () {
$("#sleC").append("<option>" + this + "</option>");
});
}
});
});
}
});
});
$("#Button1").click(function () {
var strValue = "你选择的:";
strValue += $("#sleF option:selected").text();
strValue += "你的品牌为:";
strValue += $("#sleT option:selected").text();
strValue += "你的型号为:";
strValue += $("#sleC option:selected").text();
$("#divTip").show().addClass("clsTip").html(strValue);
});
})
</script>
</head>
<body>
<div class="clsInit">
厂商:<select id="sleF"><option>请选择</option></select>
品牌:<select id="sleT"><option>请选择</option></select>
型号:<select id="sleC"><option>请选择</option></select>
<input id="Button1" type="button" value="查询" class="btn" />
</div>
<div class="clsInit" id="divTip"></div>
</body>
</html>
JQuery中的省市联动的更多相关文章
- Json 基于jQuery+JSON的省市联动效果
helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery JSON Ajax 省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...
- 基于jQuery+JSON的省市联动效果
省市区联动下拉效果在WEB应用中使用非常广泛,尤其在一些会员信息系统.电商网站最为常见,开发者一般使用AJAX实现无刷新下拉联动. 本文将讲述利用jQuery插件,通过读取JSON数据,实现无刷新动态 ...
- JQuery+Ajax制作省市联动
$(document).ready(function () { $("#Province").append("<option value=''>" ...
- fragment 中利用spinner实现省市联动
(1)布局文件就不在说明了,主要说代码的实现,先把代码贴上! package com.example.cl; import android.annotation.SuppressLint; impor ...
- jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果
一.插件介绍 最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了. 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最 ...
- jQuery实现省市联动
未实现任何功能之前: 实现功能之后: 实现该功能的jQuery核心代码: <script> var provinceArr=new Array(5); provinceArr[0]=new ...
- jquery ajax实现省市二级联动
今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据 这里数据库我使用的是mysql,先看下表格: provience表 city表 这里使用provi ...
- Django(二十)下拉列表-省市联动实例:jquery的ajax处理前端
一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...
- 用jquery实现省市联动
<!-- 需求: [1] 动态生成省份选择框. [2] 当选择了省份的某一项时, 动态改变 城市选择中的列表项. --> <!DOCTYPE html> <html la ...
随机推荐
- 让footer在底部(测试它人方法)
要求:网页布局中,页脚在底部.内容不够一页时,在底部.内容超过一页时,出现卷动条,页脚也在被挤到底部 1.测试的这个文章介绍的办法 链接: http://www.cnblogs.com/cheny ...
- mongodb3 权限认证问题总结
mongodb3 权限认证问题总结 标签(空格分隔): mongodb 权限 数据库 认证 ubuntu用户安装最新版本mongodb 添加key sudo apt-key adv --keyserv ...
- 【好程序员笔记分享】——Cocoapods集成
-iOS培训,iOS学习-------型技术博客.期待与您交流!------------ Xcode集成POD教程 准备工作: 首先我们要在我们的电脑中安装POD,进入命令行,输入如下指令 sudo ...
- Nlog从下载到使用例子
第一.首先下载nlog.dll 下载地址:http://pan.baidu.com/s/1i3DQsV7 第二.添加nlog.ll的引用 第三.代码 private static Logger log ...
- BZOJ 2626 JZPFAR(KD-tree)
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2626 题意:平面上有n个点.现在有m次询问,每次给定一个点(px, py)和一个整数k, ...
- LeetCode_Word Ladder
Given two words (start and end), and a dictionary, find the length of shortest transformation sequen ...
- csdn的下载链接token
qt之QComboBox定制 http://www.cnblogs.com/swarmbees/p/5710714.html http://download.csdn.net/detail/qq_30 ...
- 最短路径问题:dijkstar
算法描述: 输入图G,源点v0,输出源点到各点的最短距离D 中间变量v0保存当前已经处理到的顶点集合,v1保存剩余的集合 1.初始化v1,D 2.计算v0到v1各点的最短距离,保存到D for eac ...
- poj 3498 March of the Penguins(最大流+拆点)
题目大意:在南极生活着一些企鹅,这些企鹅站在一些冰块上,现在要让这些企鹅都跳到同一个冰块上.但是企鹅有最大的跳跃距离,每只企鹅从冰块上跳走时会给冰块造成损害,因此企鹅跳离每个冰块都有次数限制.找出企鹅 ...
- 链表的基本操作(Basic Operations on a Linked List)
链表可以进行如下操作: 创建新链表 增加新元素 遍历链表 打印链表 下面定义了对应以上操作的基本函数. 创建新链表 新链表创建之后里面并没有任何元素,我们要为数据在内存中分配节点,再将节点插入链表.由 ...