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. jQuery-qrcode.js 生成带Logo 的二维码

    引入文件  jQuery-qrcode.js 地址:https://blog-static.cnblogs.com/files/kitty-blog/jquery-qrcode.js https:// ...

  2. 阿里云SSL证书到期（续期）图文教程

    今天公司项目突然报错 后来查询是SSL证书过期了.友情提示: 证书产品仅支持新签发.不支持续费.证书到期前需在阿里云SSL证书控制台重新购买和申请证书. 登录阿里云控制台,点击产品与服务,在搜索框搜索 ...

  3. webpack4提升180%编译速度

    前言 对于现在的前端项目而言,编译发布几乎是必需操作,有的编译只需要几秒钟,快如闪电,有的却需要10分钟,甚至更多,慢如蜗牛.特别是线上热修复时,分秒必争,响应速度直接影响了用户体验,用户不会有耐心等 ...

  4. web前端总结面试问题<经常遇到的手写代码>

    冒泡排序 var arr = [5,8,3,6,9] for(var i=0;i<arr.length;i++){ for(var j=i+1;j<arr.length;j++){ if( ...

  5. JDK8 新特性

    JDK8 新特性目录导航: Lambda 表达式 函数式接口 方法引用.构造器引用和数组引用 接口支持默认方法和静态方法 Stream API 增强类型推断 新的日期时间 API Optional 类 ...

  6. python--基本类型之数值

    Number(数字): 数字类型创建: a = 10b = ab = 20 pint('a : 'a)pint('b : 'b) 数据类型转换: int(x,[,base]) 将 x 转换为一个整数f ...

  7. xss挑战赛小记 0x01(xsstest)

    0x00 今天在先知社区看到了一个xss挑战赛 结果发现比赛已经结束 服务器也关了 百度找了个xss挑战赛来玩一下 正好印证下xss的学习--- 地址     http://test.xss.tv/ ...

  8. php简易实现计划任务

    index.php <?php function ceshi(){ $wan = file_get_contents('./wangt_index.txt',true); $jifen = $w ...

  9. 洛谷P2307 迷宫

    怎么又是一道叫迷宫的题呀QWQ 题目链接 这道题主要是对并查集的考察,需要注意的坑点在于有可能存在的不止一个联通块. 我们只需要对输入的两个数据进行判断,如果在一个集合中证明有多条路则输出0,如果不在 ...

  10. poorpool 的 考场 NOI Linux 配置

    把~/.bashrc里的force_color_prompt=yes前面那个#去掉,终端就有高亮啦qwq!(然后source一下 然后vim ~/.vimrc然后加入 (为什么不改/etc/vim/v ...