개인 공부/Javascript
부트스트랩 multiselectsplitter 예시코드 example
이대곤
2022. 9. 13. 14:16
* 참고링크 - 여기서 개발자모드로 코드보기해서 필요한 라이브러리 찾아내서 아래와 같이 만들어버림
예시코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.rawgit.com/poolerMF/bootstrap-multiselectsplitter/master/bootstrap-multiselectsplitter.js"></script>
<script>
$(function() {
$('#example1').multiselectsplitter();
$('#example2').multiselectsplitter({
selectSize : 7,
clearOnFirstChange : true,
groupCounter : true
});
$('#example3').multiselectsplitter({
groupCounter : true,
maximumSelected : 2
});
$('#example4').multiselectsplitter({
groupCounter : true,
maximumSelected : 3,
onlySameGroup : true
});
$('#example5')
.multiselectsplitter(
{
size : 6,
groupCounter : true,
maximumSelected : 2,
maximumAlert : function(maximumSelected) {
alert('You choose ' + (maximumSelected + 1)
+ ' options. Are you crazy ?');
},
afterInitialize : function($firstSelect,
$secondSelect) {
$("body")
.append(
'This text was edded after initialization of example5');
},
createFirstSelect : function(label, $originalSelect) {
return '<option class="text-success">prefix - '
+ label + '</option>';
},
createSecondSelect : function(label, $firstSelect) {
return '<option class="text-danger"> ??? </option>';
}
});
});
</script>
<div class="container">
<div class="row">
<div class="col-xs-12" style="padding-top:10px;">
<h4>EXAMPLE1:</h4>
Simple select, no multiple
<select id="example1">
<optgroup label="Category 1">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
<option value="4">Choice 4</option>
</optgroup>
<optgroup label="Category 2">
<option value="5">Choice 5</option>
<option value="6">Choice 6</option>
<option value="7">Choice 7</option>
<option value="8">Choice 8</option>
</optgroup>
<optgroup label="Category 3">
<option value="9">Choice 9</option>
<option value="10">Choice 10</option>
<option value="11">Choice 11</option>
<option value="12">Choice 12</option>
</optgroup>
</select>
</div>
<div class="col-xs-12" style="padding-top:10px;">
<h4>EXAMPLE2:</h4>
Multiple select of size 7 with group counter. Second select is cleared, when first changed.
<select id="example2" multiple="multiple">
<optgroup label="Category 1">
<option value="1">Choice 1</option>
<option value="2" selected="selected">Choice 2</option>
<option value="3">Choice 3</option>
<option value="4">Choice 4</option>
</optgroup>
<optgroup label="Category 2">
<option value="5">Choice 5</option>
<option value="6">Choice 6</option>
<option value="7">Choice 7</option>
<option value="8">Choice 8</option>
</optgroup>
<optgroup label="Category 3">
<option value="9">Choice 9</option>
<option value="10">Choice 10</option>
<option value="11">Choice 11</option>
<option value="12">Choice 12</option>
</optgroup>
</select>
</div>
<div class="col-xs-12" style="padding-top:10px;">
<h4>EXAMPLE3:</h4>
Multiple select with group counter. You can select maximum 2 options of all categories.
<select id="example3" multiple="multiple">
<optgroup label="Category 1">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3" selected="selected">Choice 3</option>
<option value="4">Choice 4</option>
</optgroup>
<optgroup label="Category 2">
<option value="5">Choice 5</option>
<option value="6" selected="selected">Choice 6</option>
<option value="7">Choice 7</option>
<option value="8">Choice 8</option>
</optgroup>
<optgroup label="Category 3">
<option value="9">Choice 9</option>
<option value="10">Choice 10</option>
<option value="11">Choice 11</option>
<option value="12">Choice 12</option>
</optgroup>
</select>
</div>
<div class="col-xs-12" style="padding-top:10px;">
<h4>EXAMPLE4:</h4>
Multiple select with group counter. You can select maximum 3 options ONLY from one cattegory.
<select id="example4" multiple="multiple">
<optgroup label="Category 1">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3" selected="selected">Choice 3</option>
<option value="4">Choice 4</option>
</optgroup>
<optgroup label="Category 2">
<option value="5">Choice 5</option>
<option value="6">Choice 6</option>
<option value="7">Choice 7</option>
<option value="8">Choice 8</option>
</optgroup>
<optgroup label="Category 3">
<option value="9">Choice 9</option>
<option value="10">Choice 10</option>
<option value="11">Choice 11</option>
<option value="12">Choice 12</option>
</optgroup>
</select>
</div>
<div class="col-xs-12" style="padding-top:10px;">
<h4>EXAMPLE5:</h4>
Multiple select with custom functions for creating options. Select works even with custom text. On background, original select is correctly updated with original values. Maximum alert message was changed.
<select id="example5" multiple="multiple">
<optgroup label="Category 1">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
<option value="4">Choice 4</option>
</optgroup>
<optgroup label="Category 2">
<option value="5">Choice 5</option>
<option value="6">Choice 6</option>
<option value="7">Choice 7</option>
<option value="8">Choice 8</option>
</optgroup>
<optgroup label="Category 3">
<option value="9">Choice 9</option>
<option value="10">Choice 10</option>
<option value="11">Choice 11</option>
<option value="12">Choice 12</option>
</optgroup>
</select>
</div>
</div>
</div>실행결과
