<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/vn.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-5">
<label for="priority" class="form-label">Chọn mức độ ưu tiên:</label>
<select id="priority" class="form-select">
<option value="">-- Vui lòng chọn --</option>
<option value="low">Thấp (Low)</option>
<option value="medium">Trung bình (Medium)</option>
<option value="high">Cao (High)</option>
</select>
<div class="mt-4 p-3 border rounded bg-light">
<div id="desc-default">Vui lòng chọn mức độ để xem chi tiết.</div>
<div class="priority-desc" id="desc-low" style="display: none;">
<span class="badge bg-secondary">Thấp:</span> Công việc không gấp, có thể hoàn thành trong tuần này.
</div>
<div class="priority-desc" id="desc-medium" style="display: none;">
<span class="badge bg-info text-dark">Trung bình:</span> Cần ưu tiên xử lý sau các việc quan trọng.
</div>
<div class="priority-desc" id="desc-high" style="display: none;">
<span class="badge bg-danger">Cao:</span> Cần xử lý ngay lập tức trong ngày hôm nay!
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
function toggleDescription(selectElement, descClassPrefix, defaultId) {
var val = $(selectElement).val();
// Ẩn tất cả theo class chung (ví dụ: .priority-desc)
$('.' + descClassPrefix).hide();
$('#' + defaultId).hide();
if (val === "") {
$('#' + defaultId).fadeIn();
} else {
$('#desc-' + val).fadeIn();
}
}
// Cách gọi:
$('#priority').on('change', function() {
toggleDescription(this, 'priority-desc', 'desc-default');
});