Oracle APEX 中更智能的 Popup LOV：自动滚动到当前月份（或任意指定值）
JavaScriptOracle APEXPopup LOV前端开发数据库应用用户体验优化
原文地址: https://rafal.hashnode.dev/smarter-popup-lov-in-oracle-apex-auto-scroll-to-current-month-or-any-other-value
# Smarter Popup LOV in Oracle APEX: Auto scroll to current month (or any other value)
## Challenge
当您打开一个 Popup LOV 时，它总是从列表顶部开始显示。
假设有一个包含过去 12 个月和未来 12 个月（YYYY-MM 格式）的列表，从 2025 年到 2027 年。当前月份是 2026-01，但是打开 Popup LOV 时第一个显示的选项却是 2025-01。即使用户设置了默认值为 2026-01，仍然需要滚动浏览所有的 2025 年月份才能选择 2026-02。
## Solution - a little bit of JavaScript
我们可以使用一小段 JavaScript 代码在 Popup LOV 打开时自动滚动到当前月份。
为 Popup LOV 项添加一个动态动作，触发条件设置为点击时：
脚本代码如下：
```javascript
// Wait a moment for APEX to render the Popup LOV window
setTimeout(function() {
// 1. Get current year and month in YYYY-MM format
let today = new Date();
let searchedMonth = today.getFullYear() + '-' + String(today.getMonth() + 1).padStart(2, '0');
// 2. Find the container with the list (Popup LOV)
let lovContainer = document.querySelector('.a-PopupLOV-results');
if (lovContainer) {
// 3. Find the row containing our month in the text
let rows = lovContainer.querySelectorAll('li, tr'); // Handles both lists and tables
let targetRow = Array.from(rows).find(el => el.textContent.includes(searchedMonth));
if (targetRow) {
// 4. Scroll to the found element
targetRow.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
// Optional: visual highlighting
targetRow.style.backgroundColor = '#E9E7E6';
}
}
}, 300); // 300ms delay to allow window to appear
```
## More Than Just Dates
这个解决方案非常灵活。您可以修改脚本使列表滚动到任何值，而不仅仅是日期。您可以用它来聚焦到特定类别、默认部门或任何长列表中的高优先级状态。