Custom select box với JQuery Select2

Học JQuery 01/12/2017 07:00 972
JQuery select2 là một thư viện được viết bằng Javascript cho phép nhà phát triển tuy biến HTML tags select box. Thì trong bài viết này mình sẽ chia sẻ cho các bạn một số highlight tips mà trong quá trình làm việc với JQuery Select2 mình đã tích lũy được.

Mình cũng không giới thiệu quá nhiều về JQuery Select2.js nữa vì nó cũng khá nổi tiếng rồi. Trong bài viết này mình muốn chia sẻ với các bạn một số highlight tip mà mình đã ngộ ra trong quá trình làm việc với JQ.Select2.js mà thôi. Có thể nói tính đến thời điểm hiện tại thì mình thấy JQuery Select2.js cũng là khá hoàn thiện. Để tìm hiểu thêm về JQuery Select2.js bạn có thể xem thêm tại https://select2.org/

Để sử dụng Select2.js thì bạn cần download thư viện này về và Import vào project của bạn nhé. Trong ví dụ của mình mình sử dụng luôn từ nguồn của CDN.

P/s: Lưu ý thư viện mình dùng phát triển trên nền JQuery. Nếu bạn sử dụng JS Framework khác thì bạn sử dụng thư viện của JS Framework đó nhé.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>

Ví dụ 01: Single select box

<!DOCTYPE>
<html>
    <head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
    </head>
    <body>
    	<select id="example" style="width:300px">
            <option value="PHP">PHP</option>
            <option value="MySQL">MySQL</option>
            <option value="JQuery">JQuery</option>
            <option value="NodeJS">NodeJS</option>
            <option value="NoSQL">NoSQL</option>
        </select>
        <script type="text/javascript">
        	$(document).ready(function(){
				$('#example').select2();
			});
        </script>
    </body>
</html>

Xem kết quả

Để cho phép người dùng chọn  được nhiều giá trị bạn chỉ cần thêm thuộc tính multiple="multiple".

Ví dụ 02: Multiple select box.

<!DOCTYPE>
<html>
    <head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
    </head>
    <body>
    	<select multiple="multiple" id="example" style="width:300px">
            <option value="PHP">PHP</option>
            <option value="MySQL">MySQL</option>
            <option value="JQuery">JQuery</option>
            <option value="NodeJS">NodeJS</option>
            <option value="NoSQL">NoSQL</option>
        </select>
        <script type="text/javascript">
        	$(document).ready(function(){
				$('#example').select2();
			});
        </script>
    </body>
</html>

Xem kết quả

Để tìm hiểu thêm về JQuery Select2.js bạn vui lòng xem thêm tại https://select2.org/ hoặc http://select2.github.io/select2/

Thông thường khi bạn muốn xóa một giá trị đã được chọn trước đó(multiple) thì JQuery Select2.js sẽ xóa luôn. Giờ mình muốn trước khi xóa một giá trị nào đó thì nó sẽ yêu cầu bạn xác nhận có xóa hay không. Chúng ta sẽ sử dụng 2 sự kiện là select2:unselecting và select2:unselect.

Ví dụ 03: Select2 confirm.

<!DOCTYPE>
<html>
    <head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
    </head>
    <body>
    	<select multiple="multiple" id="example" style="width:300px">
            <option value="PHP">PHP</option>
            <option value="MySQL">MySQL</option>
            <option value="JQuery">JQuery</option>
            <option value="NodeJS">NodeJS</option>
            <option value="NoSQL">NoSQL</option>
        </select>
        <script type="text/javascript">
        	$(document).ready(function(){
				var select2 = $('#example').select2();
				select2.on("select2:unselecting", function (e) {
					if(confirm('Bạn có chắc chắn muốn xóa dịch vụ này ?')){
						select2.data('unselecting',1);
						return true;
					}else{
						select2.data('unselecting',0);
						return false;
					}
				});
				select2.on("select2:unselect", function (e) {
					if(select2.data('unselecting')==1){
						alert('Đã xóa');
					}
				});
			});
        </script>
    </body>
</html>

Xem kết quả

Thông thường để lấy các giá trị mà bạn đã chọn chúng ta thường sử dụng hàm .val() trong JQuery. Trong một số trường hợp bạn cần lấy các giá trị mình đã chọn trong sự kiện select2:select bạn làm như sau.

<!DOCTYPE>
<html>
    <head>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
    </head>
    <body>
    	<select multiple="multiple" id="example" style="width:300px">
            <option value="PHP">PHP</option>
            <option value="MySQL">MySQL</option>
            <option value="JQuery">JQuery</option>
            <option value="NodeJS">NodeJS</option>
            <option value="NoSQL">NoSQL</option>
        </select>
        <script type="text/javascript">
        	$(document).ready(function(){
			var select2 = $('#example').select2();
			select2.on("select2:select", function (e) {
				var languages = $(e.currentTarget).val();
                alert(languages);
			});
		});
        </script>
    </body>
</html>

Xem kết quả

Kết luận:

....

Xem Thêm

Profile photo of adminTheHalfHeart

B.V.T

Sinh ra và lớn nên ở Bắc Giang. Hiện tại thì tôi đang là một lập trình viên tại VietISO. Tôi lập website này với mục đích là bookmark những gì tôi đã đọc qua và mong muốn chia sẻ những gì tôi biết.