jQuery下拉列表二级联动插件的视图代码：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery下拉列表二级联动插件</title>

    <script type="text/javascript" src="jquery-1.7.1.min.js"></script><!--引用jQery插件-->

    <script type="text/javascript" src="jQuery.selected.js"></script><!--jQuery下拉列表二级联动插件-->

    <script type="text/javascript" src="js.js"></script><!--调用代码-->

</head>

<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>

</html>

jQuery下拉列表二级联动插件（jQuery.selected.js）代码，网上的已经被人封装，直接拿来使用就可以：

(function ($) {

	$.fn.selected = function (settings, extraSettings) {

		var options;

		options = {

			NextSelId: '#nextsel',

			SelTextId: '#seltext',

			Separator: '  ',

			SelStrSet: [{ name: 'selected', subname: 'selected'}]

		};

		return this.each(function () {

			$.extend(options, settings, extraSettings);

			var $$, $$next;

			$$ = $(this);

			$$next = $(options.NextSelId);

			$$.append("<!--selected 1.0 Bate Copyright (c) 2012 Relict-->");

			$.each(options.SelStrSet, function () {

				var options = this;

				$$.append("<option value=" + options.name + ">" + options.name + "</option>");

			});

			function selchage() {

				$$.children("option").each(function (i, o) {

					if ($(this).attr("selected")) {

						$$next.children("option").remove();

						var temp = options.SelStrSet[i].subname.split("|");

						for (k = 0; k < temp.length; k++) {

							$$next.append("<option value=" + temp[k] + ">" + temp[k] + "</option>");

						};

					};

				});

			}

			function setText() {

				$(options.SelTextId).val($$.val() + options.Separator + $$next.val());

			}

			$$.change(function () {

				selchage();

				setText();

			});

			$$next.change(function () {

				setText();

			})

			selchage();

		});

	}

})(jQuery);

调用代码js.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: '天津'}]

}

jQuery下拉列表二级联动插件的更多相关文章

  1. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  2. Mybatis + js 实现下拉列表二级联动

    Mybatis + js 实现下拉列表二级联动 学习内容: 一.业务需求 二.实现效果 三.代码实现 1. province_city.jsp 2. TwoController 2. Province ...

  3. Select标签下拉列表二级联动级联

    首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID. var options=new Array(); $(document).ready(function(){ // ...

  4. asp.net mvc jQuery 城市二级联动

    页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...

  5. jquery实现二级联动

    闲来没事,写点jquery练练手. <!--json代码部分 新建文件liandong.json--> var pron_city = { '省':['all'], '北京':[ {'市' ...

  6. Struts2, jquery, select二级联动

    1. 下载jquery.js文件放在webroot下js文件夹里 2. 配置struts.xml: <package name="default" namespace=&qu ...

  7. django + jquery 实现二级联动

    二级联动用ajax还是很好实现的,下面简单给个例子 jquery代码 $("#id_sel").change(function(){ $.get("/browser/ge ...

  8. jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）

    1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  9. jQuery应用实例3：全选、二级联动

    全选: 这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8378221.html 如果使用jQuery则会方便很多: <!DOCTYPE html> ...

随机推荐

  1. Python 2.6.6升级到Python2.7.15

    最近在使用Python处理MySQL数据库相关问题时,需要用到Python2.7.5及以上版本,而centos6.5等版本操作系统默认自带的版本为2.6.6,因此需要对python进行升级. Pyth ...

  2. 在Pycharm中导入第三方模块库（诸如：matplotlib、numpy等）

    在Pycharm中导入第三方模块库 一.打开pycharm: 二.点击菜单上的“file” -> “setting”: 三.步骤二完成后出现界面如下所示.选中你的项目(比如thisyan Pro ...

  3. hive自定义函数（UDF）

    首先什么是UDF,UDF的全称为user-defined function,用户定义函数,为什么有它的存在呢?有的时候 你要写的查询无法轻松地使用Hive提供的内置函数来表示,通过写UDF,Hive就 ...

  4. STM32Cube 5.0 使用V1.7.0的固件库生成keil5环境下的F1工程时发现问题

    生成的stm32f1xx_hal_msp.c文件里面,HAL_MspInit(void)函数居然没有了之前1.6库里面的系统中断优先级的设置: /* MemoryManagement_IRQn int ...

  5. ruby中将数字转化为字符串格式时差

        工作中有时候会碰到需要把数值展示成比较直观的时间差格式,divmod方法很适合做这个操作.   divmod #输出商和余数的数组    60.divmod(50) #=> [1, 10 ...

  6. Nginx一直报504超时，配置相关参数好了

    相关参数:large_client_header_buffers 4 16k;client_max_body_size 30m;client_body_buffer_size 128k;proxy_c ...

  7. 6.JAVA知识点归纳整理

    一.jdk初识与HelloWord: 二.java基础: 2.1 标识符_关键字_数据类型 2.2 数据类型转换 2.3 程序编写格式 2.4 运算符 2.5 分支与for循环 2.6 while_b ...

  8. 听雷哥浅谈Redis

    Linux下安装redis 1.下载源码,解压缩后编译源码. $ wget http://download.redis.io/releases/redis-2.8.3.tar.gz $ tar xzf ...

  9. NOI2018 游记

    day-2 飞向长沙 上午收拾了收拾东西,下载了动画<爱吃拉面的小泉同学>的前五集. 吃过午饭,就准备坐车去运城机场.高铁飞速,转眼间就到了.我没坐过几次飞机,而且比较恐飞,就很难受qwq ...

  10. (原)编写JAVA工具之json自动封装成pojo

    代码在最后 我个人是不太喜欢http和json,可能是游戏做的多了的原因的,对通信协议和通信方式特敏感,因此即使是做应用我也会选择rpc而非http,但是有时候因为各种原因,还是不的不处理标准的htt ...