如何使用 JavaScript 将静态值作为列表中的第一个值？ ORACLE APEX - 喜欢列表答案

【问题标题】：How to have static value as first value in list using JavaScript? ORACLE APEX - LOV LIST如何使用 JavaScript 将静态值作为列表中的第一个值？ ORACLE APEX - 喜欢列表
【发布时间】：2023-03-26 18:44:01
【问题描述】：

我正在使用 Oracle Application Express 4.2，并且我有一个 LOV（值列表），其中包含一个选择列表中的航班号列表。这是一个动态值列表。我想在“即将到来”的选择列表顶部添加一个静态值。我还想在显示“过去航班”的选择列表中的特定航班之前添加一个静态值。通过这种方式，我可以在选择列表中区分哪些航班即将到来，哪些是过去的航班。我的动态 LOV 目前称为 P_100_FLIGHT_LOV2。

我在下面有一些 JavaScript 代码在页面加载时正在执行，它将“即将到来的”静态值添加到我的选择列表中，但它作为最后一个选项添加。我希望在特定航班之前将其放在顶部和中间。如何使用 JavaScript 实现这一点？

下面是我的 JavaScript 代码：

var x = document.getElementById("P100_FLIGHT_LOV2");
 var option = document.createElement("option");
 option.text = "Upcoming";
 x.add(option);

下面是这段 JS 代码当前的结果：

SPX-14
67P
OA-9
55S
DRAGONX
34R
UPCOMING ----------CURRENTLY AT BOTTOM OF SELECT LIST

我想要达到的理想结果集：

UPCOMING -----------STATIC VALUE
SPX-14
67P
OA-9
PAST FLIGHTS ---------STATIC VALUE
55S
DRAGONX
34R

【问题讨论】：

标签： javascript oracle oracle-apex oracle-apex-5 lov

【解决方案1】：

我不知道如何使用 JavaScript，但我知道如何使用 Oracle。所以，给你。

SQL> with flight_schedule (flight, sched) as
  2  (select 'SPX-14' , to_date('12.01.2018 22:00', 'dd.mm.yyyy hh24:mi') from dual union
  3   select '67P'    , to_date('12.01.2018 22:15', 'dd.mm.yyyy hh24:mi') from dual union
  4   select 'OA-9'   , to_date('12.01.2018 22:40', 'dd.mm.yyyy hh24:mi') from dual union
  5   select '555'    , to_date('12.01.2018 18:30', 'dd.mm.yyyy hh24:mi') from dual union
  6   select 'DRAGONX', to_date('12.01.2018 19:00', 'dd.mm.yyyy hh24:mi') from dual union
  7   select '34R'    , to_date('12.01.2018 19:28', 'dd.mm.yyyy hh24:mi') from dual),
  8  static_values as
  9  (select 1 what, 'UPCOMING' statval from dual union
 10   select 3     , 'PAST FLIGHTS'     from dual
 11  ),
 12  --
 13  prep as
 14  (-- Static values
 15   select what, statval flight, null sched
 16     from static_values x
 17   union
 18   -- Upcoming flights
 19   select 2 what, flight, sched
 20     from flight_schedule
 21     where sched > sysdate
 22   union
 23   -- Past flights
 24   select 4 what, flight, sched
 25     from flight_schedule
 26     where sched <= sysdate
 27  )
 28  select flight, sched scheduled_time
 29  from prep
 30  order by what, sched;

FLIGHT       SCHEDULED_TIME
------------ ----------------
UPCOMING
SPX-14       12.01.2018 22:00
67P          12.01.2018 22:15
OA-9         12.01.2018 22:40
PAST FLIGHTS
555          12.01.2018 18:30
DRAGONX      12.01.2018 19:00
34R          12.01.2018 19:28

8 rows selected.

SQL>

一些注意事项：

当前的“sysdate”（关于这个例子）是 12.01.2018 21:00
flight_schedule 是实际的“航班时刻表”，有航班和安排时间
它们与静态值“联合”。 WHAT 列显示在哪里放置这些值（即指向它们的排序位置）
PREP 表准备这些值；静态的是微不足道的，而即将到来和过去的航班取决于“sysdate”

哦，是的 - 还有一件事：因为这是 Apex LoV，您必须准确选择两个值：一个 display 和一个 return 值；这些是什么，你会更清楚（可能是 FLIGHT 及其 ID 或类似的东西）。

【讨论】：

【解决方案2】：

这是我需要能够将静态值添加到现有 LOV 的 JavaScript 代码。此 JavaScript 代码在页面加载时执行，并将静态值“Past Flights”添加到指定选项。感谢大家的帮助。

$('#P100_FLIGHT_LOV2 option[value="55S"]').before('<option value="Past">--- Past Flights ---</option>');

【讨论】：

【解决方案3】：

对此的 Javascript 解决方案不是特定于 APEX 的。由于 APEX 使用 jQuery 库 this SO answer 应该这样做。

（请注意，我没有建议将这个问题作为重复问题结束，因为@Littlefoot 还表明，在 APEX 中，特别是还有其他方法可以在不使用 Javascript 的情况下做到这一点。）

【讨论】：

【解决方案4】：

最方便的方法是使用 Select2 插件。正如插件页面上写的，它与4.2版本兼容。

您需要在插件的属性中编写一个查询，该查询返回 3 列。第三列是组名（UPCOMING 和 PAST FLIGHTS）：

select 'SPX-14' display_value, 1 return_value, 'UPCOMING' group_name from dual union all
select '67P',     2, 'UPCOMING' from dual union all
select 'OA-9',    3, 'UPCOMING' from dual union all
select '55S',     4, 'PAST FLIGHTS' group_name from dual union all
select 'DRAGONX', 5, 'PAST FLIGHTS' from dual union all
select '34R',     6, 'PAST FLIGHTS' from dual

请参阅Select2 插件页面上的示例“选项分组”。

【讨论】：