Custom select box với JQuery Select2
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 ...
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="awidth: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="awidth: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="awidth: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="awidth: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:
....
