挺好用的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 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框
**jQuery多选下拉框插件详解** 在Web开发中，多选下拉框是一种常见的交互元素，它允许用户在一组选项中选择多个值。jQuery作为最流行的JavaScript库之一，提供了许多插件来增强这种用户体验。`jquery.multi-select....
在jQuery库的支持下，实现这种“带搜索功能的下拉框”变得非常简单。这里我们将深入探讨`searchableSelect`插件，它是jQuery的一个扩展，专门用于创建具有搜索功能的下拉框。 `jQuery searchableSelect` 插件提供了...
本主题将深入探讨如何使用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 年月日三级下拉框联动 使用方法非常简单 <title>JQuery 年月日三下拉框联动 <script src="jquery-1.4.2.min.js" type="text/javascript"> ...
《jQuery EasyUI 1.4.2：构建高效后台管理系统的基石》 jQuery EasyUI 是一个基于 jQuery 的轻量级前端框架，它为开发者提供了一系列易于使用的组件，以简化网页应用的开发工作。在给定的压缩包文件 "jquery-easyui...
jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)
在JavaScript和jQuery的世界里，"js 可输入下拉框（jquery）"是一个常见的交互设计需求，它结合了传统下拉框的简洁性与输入框的搜索功能，为用户提供更友好的交互体验。这种组件通常被称为“Autocomplete”或...