jQuery下拉列表二级联动插件

时间：2024-01-11 12:57:08

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: '天津'}]

}

相关文章