Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Developer Gonie

부트스트랩 multiselectsplitter 예시코드 example 본문

개인 공부/Javascript

부트스트랩 multiselectsplitter 예시코드 example

이대곤 2022. 9. 13. 14:16

* 참고링크 - 여기서 개발자모드로 코드보기해서 필요한 라이브러리 찾아내서 아래와 같이 만들어버림

https://p.bdir.in/p/jquery-based-multi-select-enhancement-plugin---multiselectsplitterjs/17550?__cf_chl_tk=IWqlpmsLWXa3tqLpwbltzc1Ui9jKDZoB6wVErQ0HyAY-1663045428-0-gaNycGzNCKU 

예시코드

<%@ 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>

실행결과

저작자표시

'개인 공부 > Javascript' 카테고리의 다른 글

$.ajax(), $.getJSON() 등의 비동기 메소드를 순차처리 되도록 하는 방법 2가지(Promise, ajaxSetup)  (0) 2022.09.23
jQuery로 append 시 이벤트가 동작 안할 때 해결방법  (0) 2022.09.14
file multitple 속성으로 선택한거 미리보기 보여지게 하기  (0) 2022.09.13
JQuery 특정메소드 비동기적 실행방식으로 인한 문제발생 및 해결과정  (0) 2022.09.07
Javascript와 JQuery 코드의 실행순서(동기, 비동기)  (0) 2022.09.07
'개인 공부/Javascript' Related Articles more
Comments