选择 h:selectOneMenu 的特定项目时调用特定的 JavaScript 函数答案

【问题标题】：Call specific JavaScript function when specific item of h:selectOneMenu is selected选择 h:selectOneMenu 的特定项目时调用特定的 JavaScript 函数
【发布时间】：2015-05-06 17:06:37
【问题描述】：

我有 ajax

<h:selectOneMenu>
<f:selectItem itemLabel="please click"/>
<f:selectItem itemLabel="1"/>
<f:selectItem itemLabel="2"/>
<f:ajax onevent="click()" />
</h:selectOneMenu>

我有 onChange

<h:selectOneMenu onChange="click()>
<f:selectItem itemLabel="please click"/>
<f:selectItem itemLabel="1"/>
<f:selectItem itemLabel="2"/>    
</h:selectOneMenu>

如果我尝试对 selectItem 使用相同的属性，它就不起作用。我认为它们不存在。

我使用了 ajax 和 onChange，但它似乎适用于 selectonemenu，但不适用于 selectItem。

【问题讨论】：

您的问题模棱两可。您要求触发我们理解为 JSF 托管 bean 操作（或侦听器）方法的“动作”，但您的代码 sn-ps 反而尝试触发 JavaScript 函数。此外，问题上存在 [javascript] 标记以及 on* 属性的显式使用表明您希望在客户端而不是服务器端执行此操作。你到底想要什么？更好的是，您最终要解决什么问题/要求，并且您认为这一切都可能是正确的解决方案？
我想通过调用js方法在客户端进行操作。代码 sn-p 适用于整个 selectOneMenu（选择菜单中的任何项目并调用 js 方法）。相反，我希望为不同的选择项调用不同的 js 方法）
为什么不让函数检查当前正在选择的项目，然后进一步委托给正确的任务/函数？我修正了问题标题并发布了答案。

标签： javascript ajax jsf-2

【解决方案1】：

只需将选定的值传递给 JS 函数，然后根据它进一步委托。

<h:selectOneMenu onchange="foo(this.value)">
    ...
</h:selectOneMenu>

function foo(selectedValue) {
    switch (selectedValue) {
        case "1": bar(); break;
        case "2": baz(); break;
        // ...
    }
}

【讨论】：