<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 select-container">
<h4 class="mb-4 text-primary">Hệ thống quản lý học phần</h4>
<div class="mb-3">
<label for="course-select" class="form-label fw-bold">Chọn khóa học cần tìm:</label>
<select class="form-select" id="course-select" data-placeholder="Nhập tên khóa học để tìm nhanh...">
<option></option>
<optgroup label="Lập trình & Công nghệ">
<option value="SCR">Lập trình Scratch cơ bản</option>
<option value="WEB">Phát triển Web (HTML, CSS, JS)</option>
<option value="PHP">Lập trình Backend với PHP & MySQL</option>
</optgroup>
<optgroup label="Robotics & AI">
<option value="WEDO">Robotics với LEGO WeDo 2.0</option>
<option value="SPIKE">LEGO Education SPIKE Prime</option>
<option value="AI">Ứng dụng Generative AI trong dạy học</option>
</optgroup>
<optgroup label="Kỹ năng số">
<option value="PROMPT">Kỹ thuật đặt câu lệnh (Prompt Engineering)</option>
<option value="SEO">Tối ưu hóa nội dung đa nền tảng</option>
</optgroup>
</select>
</div>
<div id="result" class="mt-3 alert alert-info d-none">
Bạn đã chọn mã khóa học: <span class="fw-bold text-danger" id="selected-value"></span>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
background-color: #f8f9fa;
padding-top: 50px;
}
.select-container {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
$(document).ready(function() {
// Khởi tạo Select2
$('#course-select').select2({
theme: 'bootstrap-5', // Sử dụng theme Bootstrap 5
width: '100%',
allowClear: true, // Cho phép xóa lựa chọn
language: {
noResults: function() {
return "Không tìm thấy dữ liệu phù hợp";
}
}
});
// Sự kiện khi người dùng chọn một mục
$('#course-select').on('change', function() {
const val = $(this).val();
if(val) {
$('#selected-value').text(val);
$('#result').removeClass('d-none');
} else {
$('#result').addClass('d-none');
}
});
});