-
jQuery权威指南中的下拉表达联动例子的问题5
文件不报错 但是没有效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="d:/easyui/jquery.min.js"></script>
<title>下拉列表框联动</title>
<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:#eee;display:none}
.btn{border:#666 1px solid;padding:2px;width:65px;float:right;margin-top:6px;margin-right:6px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9D8);}
</style>
<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",品牌1_2:"型号3_2_1,型号3_2_2"}
};
//这个函数的参数pF是什么 前面没有定义 是怎么得到的
$.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 += " 您选择的品牌：";
strValue += $("#selT option:selected").text();
strValue += " 您选择的型号：";
strValue += $("#selC option:selected").text();
$("#divTip").show().addClass("clsTip").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 id="divTip" class="clsInit">
</div>
</body>
</html>
2014年8月28日 11:27
添加评论
关注(0)2个答案 按时间排序 按投票排序
-
采纳的答案
注意代码中的大小写
//遍历数据增加厂商选项 $("#selF").append("<option>"+pF+"</option>");2014年8月28日 15:05
相关推荐
JQUERY权威指南（完整版）.pdf
总的来说，《jQuery权威指南（第2版）》是一本全面且深入的教程，适合初学者和有经验的开发者学习，通过阅读本书，读者不仅可以掌握jQuery的核心技术，还能了解到jQuery在不断发展的Web技术中的位置和应用。
总的来说，《jQuery权威指南(第2版)》是开发者深入学习jQuery技术，特别是jQuery Mobile的宝贵资源，通过本书，读者不仅能掌握核心技术和新特性，还能了解实际项目开发中的各种策略和技巧，从而成为jQuery开发的专家...
在网页开发中，下拉联动（Dropdown Cascade）是一种常见的交互设计，它允许用户通过选择一个选项来触发其他关联下拉菜单的更新。这种效果在层级关系明显的数据展示中非常实用，比如地区选择、产品分类等。本文将深入...
《JQuery权威指南源代码》是一本深入解析jQuery库的参考书籍，其源代码提供了丰富的实例和示例，帮助读者更好地理解和应用jQuery。jQuery是一个高效、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及...
"多选下拉列表"和"复选下拉列表"是常见的组件，用于提供用户在一组选项中进行多个选择的功能。这些组件通常用于数据筛选、配置设置或信息录入等场景。本主题将深入探讨基于jQuery的多选下拉列表插件及其应用。 1. *...
jQuery权威指南（第2版）+光盘源码jQuery选择器jQuery操作DOM jQuery中的事件与应用 jQuery的动画与特效 Ajax在jQuery中的应用 jQuery中调用JSON与XML数据jQuery UI插件 jQuery常用开发技巧 jQuery在HTML 5中的应用...
jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动...
jquery cxselect联动插件select多级联动下拉菜单 jquery cxselect联动插件select多级联动下拉菜单 jquery cxselect联动插件select多级联动下拉菜单 jquery cxselect联动插件select多级联动下拉菜单
《jQuery权威指南》是一本深入解析jQuery库的权威著作，旨在帮助读者全面理解和掌握这个广泛使用的JavaScript库。这本书的配套源码提供了丰富的示例和练习，以加深对jQuery特性和功能的理解。 源码中可能包含以下...
jquery mobile 权威指南 pdf 高清版
《jQuery权威指南》是针对JavaScript库jQuery的一本详尽教程，旨在帮助读者深入理解并熟练掌握jQuery的核心概念和实用技巧。jQuery是一个广泛使用的JavaScript库，它简化了网页的DOM操作、事件处理、动画制作以及...
jQueryEasyUI开发指南(含代码)+jQuery权威指南(含代码) 。jQueryEasyUI开发指南王波著.pdf（含代码）+jQuery权威指南（含代码）jQueryEasyUI jQuery。
在这个项目中，jQuery被用来监听用户的选择，同步更新下拉列表，实现联动效果。 `chosen.jquery.min.js`和`chosen.min.css`是Chosen插件的文件，Chosen是一个优秀的下拉选择框增强插件，它可以将传统的HTML select...
JQUERY权威指南.part1JQUERY权威指南.part1
在网页设计中，二级联动下拉列表是一种常见的交互元素，常用于实现地区选择、类别筛选等场景。jQuery作为一款强大的JavaScript库，简化...这个例子可以作为学习和参考，帮助你理解和应用jQuery来创建二级联动下拉列表。
《JQuery权威指南》是一本深受开发者喜爱的JQuery学习资料，它全面深入地介绍了JQuery库的各种功能和使用技巧。这本书的代码部分是学习JQuery的重要资源，它包含了书中所有示例的源代码，可以帮助读者更好地理解并...
在本项目中，jQuery将用于处理DOM元素的操作和事件监听，实现下拉菜单之间的联动。 四级联动菜单的工作原理是这样的： 1. **第一级（省份）**：用户打开页面时，省份的下拉菜单显示所有省份。当用户选择一个省份时...
在网页开发中，实现省市县下拉列表联动是一种常见的需求，尤其在填写地址或选择地理位置时。`jQuery`和`Ajax`技术的结合是解决这一问题的高效方式。`jQuery`是一个轻量级的JavaScript库，它简化了DOM操作、事件处理...