jQuery下拉列表二级联动插件
jQuery下拉列表二级联动插件的视图代码：
<!doctype html>
<html >
<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 ></select>
<select ></select>
<input /><br />
<select ></select>
<select ></select>
<input />
</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: '天津'}]
}