bootstrap select二级联动
柴宝
js版本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./bootstrap-select/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
var classes = [{
classno: 'c01',
classname: '班级1'
}, {
classno: 'c02',
classname: '班级2'
}, {
classno: 'c03',
classname: '班级3'
}];
var students = [{
studentno: 's01',
studentname: '学生1',
classno: 'c01'
}, {
studentno: 's02',
studentname: '学生2',
classno: 'c02'
}, {
studentno: 's03',
studentname: '学生3',
classno: 'c03'
}, {
studentno: 's04',
studentname: '学生4',
classno: 'c03'
}];
var showStudents = [];
$(function() {
initClass();
});
function initClass() {
$.each(classes, function(i, item) {
$('#classes').append('<option value="' + item.classno + '">' + item.classname + '</option>');
});
$('#classes').selectpicker('refresh');
}
function classChange() {
showStudents = [];
document.all.students.length = 0; //清空select
var selectedClasses = $('#classes').val();
if (selectedClasses != undefined && selectedClasses != null && selectedClasses.length > 0) {
$.each(selectedClasses, function(j, selectedclassno) {
$.each(students, function(i, student) {
if (student.classno == selectedclassno) {
showStudents.push(student);
}
});
});
}
$.each(showStudents, function(i, item) {
$('#students').append('<option value="' + item.studentno + '">' + item.studentname + '</option>');
});
$('#students').selectpicker('refresh');
}
</script>
</head>
<body>
<select class="selectpicker" id="classes" multiple onchange="classChange();">
</select>
<select class="selectpicker" id="students" multiple></select>
</body>
</html>
angularjs版本
<!DOCTYPE html>
<html ng-app="my_app">
<head>
<meta charset="utf-8">
<title></title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./bootstrap-select/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="./angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("my_app", []);
app.controller('my_controller', function($scope) {
window.scope = $scope;
$scope.classes = [{
classno: 'c01',
classname: '班级1',
label: 'label-success',
}, {
classno: 'c02',
classname: '班级2',
label: 'label-warning',
}, {
classno: 'c03',
classname: '班级3',
label: 'label-danger',
}];
$scope.students = [{
studentno: 's01',
studentname: '学生1',
classno: 'c01',
label: 'label-success',
}, {
studentno: 's02',
studentname: '学生2',
classno: 'c02',
label: 'label-warning',
}, {
studentno: 's03',
studentname: '学生3',
classno: 'c03',
label: 'label-danger',
}, {
studentno: 's04',
studentname: '学生4',
classno: 'c03',
label: 'label-danger',
}];
$scope.classChange = function() {
$scope.showStudents = [];
var selectedClasses = $('#classes').val();
if (selectedClasses != undefined && selectedClasses != null && selectedClasses.length > 0) {
$.each(selectedClasses, function(j, selectedclassno) {
$.each($scope.students, function(i, student) {
if (student.classno == selectedclassno) {
$scope.showStudents.push(student);
}
});
});
}
if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
$scope.$apply();
}
$('#students').selectpicker('refresh');
}
$scope.get = function() {
var selectedClasses = $('#classes').val();
var selectedStudents = $('#students').val();
alert(selectedClasses);
alert(selectedStudents);
}
$scope.init = function() {
$('#classes').selectpicker('refresh');
}
});
</script>
<script type="text/javascript">
function classChange() {
window.scope.classChange();
}
</script>
</head>
<body ng-controller="my_controller">
<div>
<select class="selectpicker" id="classes" multiple onchange="classChange();">
<option ng-repeat="item in classes" value="{{item.classno}}"
data-content="<span class='label {{item.label}}'>{{item.classname}}</span>">{{item.classname}}
</option>
</select>
<select class="selectpicker" id="students" multiple>
<option ng-repeat="item in showStudents" value="{{item.studentno}}"
data-content="<span class='label {{item.label}}'>{{item.studentname}}</span>">{{item.studentname}}
</option>
</select>
<button ng-click="get();">获取</button>
</div>
</body>
</html>
类似资料：