jQuery 下拉列表 二级联动插件分享_jquery

jQuery二级联动插件:jQuery.selected
一个页面可以引用多个联动效果,使用方法:
配置js:

复制代码 代码如下:

var defaults = {
NextSelId: '#Select2',
SelTextId: '#Text1',
Separator: '--',
SelStrSet: [
{ name: '请选择', subname: '请选择'},
{ name: '★高起本★', subname: '计算机科学与技术|汉语言文学' },
{ name: '★高起专★', subname: '语文教育|文秘|学前教育|旅游管理|法律事务|经济管理|会计电算化|电子商务|计算机信息管理|软件工程|机电一体化|精细化学品生产技术|机械制造设计及自动化|播音与主持|艺术设计|书法方向艺术设计' },
{ name: '★专升本★', subname: '思想政治教育|汉语言文学|英语|数学与应用数学|电子信息工程|计算机科学与技术|会计学|公共事业管理|旅游管理|体育教育|音乐学|艺术设计|书法方向艺术设计'}]
}
var defaults2 = {
NextSelId: '#Select4',
SelTextId: '#Text2',
Separator: '★',
SelStrSet: [
{ name: '请选择', subname: '请选择'},
{ name: '北京', subname: '北京1|北京2' },
{ name: '上海', subname: '上海1|上海2|上海3|上海4' },
{ name: '天津', subname: '天津'}]
}

配置说明:
  NextSelId:需要联动加载的下拉列表 ID
  SelTextId:显示选择选项的文本框 ID
  Separator:一级菜单、二级菜单分割字符串
  SelStrSet:配置下拉选项
    [{ name: '请选择', subname: '请选择'}]
      name:一级下拉选项;subname:二级下拉选项,多个用“|”分开;

html页面:

复制代码 代码如下:

<body>
<script type="text/javascript">
$(function () {
$('#Select1').selected(defaults);
$('#Select3').selected(defaults2);

});
</script>
<select id="Select1">
</select>
<select id="Select2">
</select>
<input id="Text1" type="text" />
<br />
<select id="Select3">
</select>
<select id="Select4">
</select>
<input id="Text2" type="text" />
</body>

有好的建议请留言评论!

完整JS下载地址

时间: 2024-09-21 18:34:34

jQuery 下拉列表 二级联动插件分享_jquery的相关文章

原创jQuery弹出层插件分享_jquery

依赖jquery,兼容IE6\7\8 火狐 chrom 等主流浏览器(绝对原创), 不过请求大神帮我提升点效率. /** * jQuery弹出层插件 * * @author lanhaoooo@163.com * @since 2014-08-23 */ (function($) { var methods = { o : { isIe : !-[ 1, ] || document.documentMode >= 9,//后面的是判断IE9.IE10的 ie6 : !-[ 1, ] &&am

使用JQuery实现的分页插件分享_jquery

一个简单的jQuery分页插件,兼容AMD规范和requireJS. /** * jQuery分页插件 * */ ;(function (factory) { if (typeof define === "function" && define.amd) { // AMD模式 define([ "jquery" ], factory); } else { // 全局模式 factory(jQuery); } }(function ($) { //定义

jQuery+JSON实现AJAX二级联动实例分析_jquery

本文实例讲述了jQuery+JSON实现AJAX二级联动的方法.分享给大家供大家参考,具体如下: 后台Handler.ashx <%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; using System.Data; public class Handler : IHttpHandler { Common coObj = new Common();

jquery+json实现数据二级联动的方法_jquery

本文实例讲述了jquery+json实现数据二级联动的方法.分享给大家供大家参考,具体如下: function GetCityInfo1() { $("#ddlCITY1").empty(); //$("#ddlCOUNTY").empty(); var strId = $("#ddlPROVINCE1").attr("value"); $('#HiddenPro').val(strId); $.get("../as

jQuery实现日期联动效果实例_jquery

本文实例讲述了jQuery实现日期联动效果的方法.分享给大家供大家参考,具体如下: 实现目标: 两个日期,有下拉框: <head> //导入jquery地址 <script src="jquery-1.7.2.min.js" language="JavaScript" type="text/javascript"></script> <script type="text/javascript&q

Select标签下拉列表二级联动级联实例代码

 这篇文章主要介绍了Select标签下拉列表二级联动级联实例代码,需要的朋友可以参考下 首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID. 代码如下: var options=new Array();     $(document).ready(function(){         //二级联动         $('#ddlPages').children('option').each(function(i){             options[i]=

基于jquery的二级联动菜单实现代码_jquery

jQuery 1.3.2 简单实现select二级联动 复制代码 代码如下: <!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

jQuery三级下拉列表导航菜单代码分享_jquery

本文实例讲述了jQuery三级下拉列表导航菜单.分享给大家供大家参考.具体如下: jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js,可无限极分类,可智能判断是否有下级菜单,鼠标经过上次菜单显示下级菜单. 运行效果图:             -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery三级下拉列表导航菜单代码如下 <head> <meta

jQuery图片播放8款精美插件分享_jquery

本文将和大家一起分享8款精美的jQuery图片播放插件,每一款插件均有演示和源码下载,有兴趣的朋友可以下载使用和研究.废话不多说了,直接上这些插件. 1.3D轮播相册 这款3D相册插件利用了HTML5特性,让相片播放具有了3D效果,浏览器有限制哦. 演示   下载 2.jQuery手风琴效果图片播放器 这款播放器的特点是右侧有一个手风琴式的菜单,而且图片切换十分流畅. 演示   下载 3.流水线效果图片组切换 这款jQuery插件按一组来切换图片,方式酷似流水线,一组接着一组. 演示   下载