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. Cygwin安装篇，windows平台上运行的类UNIX模拟环境

    1.虚拟光驱的安装 虚拟光驱下载 一路下一步,不再阐述,这些广告选项不要选 2.安装文档,双击ISO文档 ISO下载地址 链接:http://pan.baidu.com/s/1miFVCYO 密码:z ...

  2. Java OOP——第一章 对象和封装

    1.软件出现的目的: 用计算机的语言描述现实世界 用计算机解决现实世界的问题   ◆面向对象设计和开发程序的好处:    交流更加流畅    提高设计和开发效率 计算机语言的发展向接近人的思维方式演变 ...

  3. 简单Maven Dos命令语句

    简单Maven Dos命令语句: 打包:mvn package 编译:mvn compile 编译测试程序:mvn test-compile 清空:mvn clean 运行测试:mvn test 生成 ...

  4. dedesmc 手机端生成静态页

    dedesmc 手机端生成静态页 1.首先下载插件,下载地址:https://pan.baidu.com/s/1Nfx_KBYuxRkZ7VzoPxy28g 密码:83x7 2.进入 dedecms ...

  5. 强化记忆之php

    php 输出的区分 新手摸索道路,有说不对的地方,还请多多包涵. echo 能够输出一个以上的字符串,也能输出html标签 print  一次只能接受一个字符串(区分与echo),也能输出html标签 ...

  6. python生成器详解

    1. 生成器 利用迭代器(迭代器详解python迭代器详解),我们可以在每次迭代获取数据(通过next()方法)时按照特定的规律进行生成.但是我们在实现一个迭代器时,关于当前迭代到的状态需要我们自己记 ...

  7. hack游戏攻略（黑吧安全吧的黑客闯关游戏）古墓探秘

    2019.2.11 这个是找到的一个黑客游戏,就是一关一关,挺像ctf的,玩玩也挺有意思,还能涨知识. 地址:http://hkyx.myhack58.com/ 入口: 入口就是这样的.提示是 图内有 ...

  8. ThinkPhP html原样入库

    开始正式搞php,在配置好PHP环境之后,从学习thinkphp框架开始php之旅. 在实际项目中需要将一个网页的html保存到数据库中,但不能被转义.由于thinkphp的数据库操作为通过他们自己O ...

  9. shell重温---基础篇（参数传递&echo命令）

    经过前两天的学习,关于shell的基础算是知道的一般般啦,最起码不算是小白了(纯属意淫).今天就来点干货哈.   首先是运行shell脚本时的参数传递.脚本内获取参数的格式为$n.n代表了一个数字,例 ...

  10. 修改npm全局安装模式的路径

    由于npm全局模块的存放路径及cache的路径默认是放在C盘下,这样肯定会增加C盘的负担,那么如果需要修改其存放路径应该怎么做呢? 第一步:在nodejs安装目录(也可以指定其它目录)下创建”node ...