挺好用的jquery实现联动下拉框:
<html>
<head>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="jquery.optionTree.js"></script>
</head>
<body>
<h3>Demo1</h3>
<input type="text" name="demo1" />
<script type="text/javascript">
$(function() {
var option_tree = {
"Option 1": {"Suboption":200},
"Option 2": {"Suboption 2": {"Subsub 1":201, "Subsub 2":202},
"Suboption 3": {"Subsub 3":203, "Subsub 4":204, "Subsub 5":205}
}
};
$('input[name=demo1]').optionTree(option_tree);
});
</script>
<br>
<h3>Demo2</h3>
<input type="text" name="demo2" />
<script type="text/javascript">
var option_tree = {
"Option 1": {"Suboption":200},
"Option 2": {"Suboption 2": {"Subsub 1":201, "Subsub 2":202},
"Suboption 3": {"Subsub 3":203, "Subsub 4":204, "Subsub 5":205}
}
};
var options = {empty_value: -1, choose: '...select'};
$('input[name=demo2]').optionTree(option_tree, options)
;
</script>
</body>
</html>
还有其他demo,ajax实现等参看连接:
http://code.google.com/p/jquery-option-tree/
分享到:
相关推荐
optionTree插件是基于jQuery的一个扩展,它的设计目标是构建具有层级结构的联动下拉框。在一些复杂的表单中,比如地区选择、产品分类等,往往需要展示一种树状的层次关系,这时optionTree就能发挥出它的优势。它不仅...
本文将深入探讨“jquery-下拉框down”这一主题,它主要涉及如何利用jQuery来实现动态下拉框功能,以及相关的文件`jquery-mcdropdown`可能包含的内容。 1. **jQuery下拉框基础** 在HTML中,下拉框通常由`<select>`...
本篇文章将详细探讨如何利用jQuery来实现下拉框的功能,这对于创建交互式用户界面是至关重要的。 首先,下拉框在HTML中通常被称为`<select>`元素,它允许用户从一组预定义的选项中进行选择。在jQuery中,我们可以...
本文将详细介绍如何使用HTML、JavaScript(通常配合jQuery)以及可能涉及的CSS来实现"layui-省市县三级联动下拉框"的功能,并探讨其可扩展性。 首先,`layui`是一个流行的前端UI框架,它提供了一套美观、响应式的...
**jQuery-searchableSelect下拉框搜索插件** 在网页开发中,下拉框(Dropdown List)是常见的交互元素,用于提供用户多个选择项。然而,当选项过多时,用户查找所需选项可能会变得困难。为了解决这个问题,`jQuery-...
一个直制的JQuery 年月日三级下拉框联动 使用方法非常简单 <title>JQuery 年月日三下拉框联动 <script src="jquery-1.4.2.min.js" type="text/javascript"> ...
jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框
1. **js加载后select未刷新**:当使用jQuery-searchableSelect插件后,如果发现下拉框没有更新,可能是由于jQuery库未正确加载,或者插件的初始化代码执行时机不恰当。确保jQuery库在插件代码之前加载,并在DOM元素...
在jQuery库的支持下,实现这种“带搜索功能的下拉框”变得非常简单。这里我们将深入探讨`searchableSelect`插件,它是jQuery的一个扩展,专门用于创建具有搜索功能的下拉框。 `jQuery searchableSelect` 插件提供了...
**jQuery多选下拉框插件详解** 在Web开发中,多选下拉框是一种常见的交互元素,它允许用户在一组选项中选择多个值。jQuery作为最流行的JavaScript库之一,提供了许多插件来增强这种用户体验。`jquery.multi-select....
本主题将深入探讨如何使用jQuery动态创建联动下拉框,这是一个常见的需求,特别是在构建多级选择或依赖性选择菜单时。 联动下拉框通常指的是两个或多个下拉框之间存在关联关系,当用户在一个下拉框中选择一个选项时...
以下是根据给出的文件内容,详细解释关于如何使用jquery-multiselect插件来实现下拉框多选功能的知识点。 首先,需要了解的是,实现下拉框多选功能,可以使用HTML原生的`<select multiple="multiple">`标签,但这种...
<script type="text/javascript" src="../../../jquery/jquery-1.7.1.js"></script> <script type="text/javascript" src="jquery-ui.min.js"></script> <script type="text/javascript" src="jquery.multiselect....
《jQuery.jqGrid 4.3.0与jQuery UI 1.8.16自定义版全面解析》 在IT领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画以及Ajax交互。jQuery.jqGrid是基于jQuery的开源数据网格插件...
`jQuery Editable Select`就是这样一个插件,它允许用户在下拉框中直接编辑输入,同时根据输入的内容实时过滤选项,提高了用户在大量数据中的查找效率。 `jQuery Editable Select`插件的工作原理是将标准的`...
总的来说,使用jQuery实现多级联动下拉框涉及到了HTML结构设计、CSS样式定制和JavaScript交互编程。开发者需要理解DOM操作、事件处理和数据通信的基本原理,同时也需具备一定的前端UI设计能力,才能创造出既实用又...
《jQuery EasyUI 1.5.3:打造高效前端界面的利器》 jQuery EasyUI 是一个基于 jQuery 的轻量级框架,它为开发者提供了一系列组件,使得构建交互式、响应式的Web界面变得更加简单。EasyUI 提供了丰富的UI组件,如...
这种插件通常基于JavaScript库jQuery构建,能够实现省份、城市、区县三级选择的联动效果,即当用户选择一个省份时,相关的城市会自动加载,接着选择城市后,对应的区县也会动态显示。这样的设计不仅提高了用户体验,...
《jQuery EasyUI 1.4.2:构建高效后台管理系统的基石》 jQuery EasyUI 是一个基于 jQuery 的轻量级前端框架,它为开发者提供了一系列易于使用的组件,以简化网页应用的开发工作。在给定的压缩包文件 "jquery-easyui...
jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)