Oracle APEX 19.1：如何从Shuttle LOV左侧选中项提取ID至页面项？

核心思路 #

Shuttle组件的左侧列表项自带data-value属性，存储着对应选项的ID。通过JavaScript监听左侧列表的选择事件及Shuttle的移动操作，实时提取选中项的ID并赋值给目标页面项。

具体实现步骤 #

1. 给Shuttle设置静态ID
   在Shuttle组件的属性面板中，设置自定义静态ID（例如P1_MY_SHUTTLE），方便后续JS定位元素。

2. 创建监听左侧列表选择的动态操作

   • 触发条件选择「事件 → 自定义」，事件名称填change，选择器填#P1_MY_SHUTTLE .uShuttleLeft select（定位Shuttle左侧的下拉列表）。
   • 动作选择「执行JavaScript代码」，输入以下代码：

     // 提取左侧所有选中项的ID
     var selectedIds = [];
     document.querySelectorAll('#P1_MY_SHUTTLE .uShuttleLeft select option:checked').forEach(opt => {
         selectedIds.push(opt.getAttribute('data-value'));
     });
     // 将ID以逗号分隔后赋值给目标页面项（示例为P1_SELECTED_IDS）
     apex.item('P1_SELECTED_IDS').setValue(selectedIds.join(','));
     

   • 若仅需单个选中项的ID，直接取selectedIds[0]即可，无需join处理。

3. 补充监听Shuttle移动按钮的动态操作
   用户通过左右箭头移动选项时，左侧列表的选中状态也会变化，需额外监听按钮点击：

   • 新增动态操作，触发条件选择「事件 → 点击」，选择器填#P1_MY_SHUTTLE .uShuttleButtons button。
   • 动作同样选择「执行JavaScript代码」，复用上述提取ID并赋值的JS代码。

关键说明 #

• APEX 19.1的Shuttle组件中，左侧列表选项的data-value属性默认存储LOV定义里的返回值（即所需的ID）。
• 若未设置Shuttle静态ID，可通过页面项名称定位，将#P1_MY_SHUTTLE替换为[name="P1_MY_SHUTTLE"]。

内容的提问来源于stack exchange，提问作者pit3k