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. 分布式日志系统ELK搭建

    ELK:Elasticsearch  Logstash Kibana Elasticsearch:是基于JSON的分布式搜索和分析引擎,专为实现水平扩展.高可用和管理便捷性而设计 Logstash:是 ...

  2. 【super vlan的配置】

    Super vlan的配置 一:根据项目需求搭建好拓扑图如下: 二:配置 1:由项目图进行理论分析:sw1属于三层交换,用于二层交换信息的转发;同时在sw1上可定义super vlan把sub vla ...

  3. ethereum(以太坊)(基础)--容易忽略的坑(一)

    pragma solidity ^0.4.0; contract base{ address public _owner=msg.sender; uint _a; string internal _b ...

  4. 【PHP】PHP常用数组(Array)函数整理

    整理了一份PHP开发中数组操作大全,包含有数组操作的基本函数.数组的分段和填充.数组与栈.数组与列队.回调函数.排序.计算.其他的数组函数等. 一.数组操作的基本函数 数组的键名和值 array_va ...

  5. PHP实现微信红包算法和微信红包的架构设计简介

    微信红包的架构设计简介: 原文:https://www.zybuluo.com/yulin718/note/93148 @来源于QCon某高可用架构群整理,整理朱玉华. 背景:有某个朋友在朋友圈咨询微 ...

  6. 微信小程序使用相机

    <view class="page-body"> <view class="page-body-wrapper"> <camera ...

  7. Linux 内核之api_man 手册安装

    开发环境:Ubuntu18.04,虚拟机virtual box 1.安装XML格式转换 sudo apt  install xmlto 2.在内核目录执行 make mandocs  大概持续了半小时 ...

  8. python中协程实现的本质以及两个封装协程模块greenle、gevent

    协程 协程,又称微线程,纤程.英文名Coroutine. 协程是啥 协程是python个中另外一种实现多任务的方式,只不过比线程更小占用更小执行单元(理解为需要的资源). 为啥说它是一个执行单元,因为 ...

  9. ruby 操作csv

    1.读取csv 文件中读取:一次读入全部(设置headers使  CSV#shift()  以CSV::Row对象返回而不是数组:使  CSV#read()  返回 CSV::Table 对象而不是数 ...

  10. Scala Tuple

    Python中的Tuple 元组将多样的对象集合到一起,元素不能修改,通过索引进行查找, 使用括号"()" 允许重复 Scala中的Tuple 概念跟Python是完全相同的 定义 ...