XUL 获取被选中的 MENUITEM 的值

Question

我正在像这样在 XUL 中创建一个下拉列表：

<button id="bid" oncommand="alert(event.target.nodeName)" >
    <menupopup>
              <menuitem label="one" value="one" />  
              <menuitem label="two" value="two" />
              <menuitem label="three" value="three" />
    </menupopup>
</button>

我想提醒正在单击的 nodeitem 的值。 使用event.target.nodeName nodeName作为menuitem但使用nodeValue正在重新调整 undefined 因为它开始采用button节点的值。 如何获得单击的菜单项的值。 我也试过$(this).val()但即使这样也没有定义。 使用$(this).attr('value')也没有帮助。 我可以为 menuitem 设置 oncommand ，但这似乎不是实际的解决方案。 这是获得价值的唯一方法或某种方法吗？

Answer 1

您在问题中的 XUL 代码不起作用。 您应该使用<menulist>而不是<button> ，或者您的<button>需要属性type="menu"或type="menu-button" 。 如果您打算使用没有type="menu"属性的<button> ，您实际上必须在<button>的命令事件处理程序中打开一个弹出窗口，然后从那里选择。 这似乎不是你想要的。 然而，这是完全可行的。 我在我的一个附加组件中使用了类似的结构，除了在单击多个<label>项目之一时我将其打开。 这允许将单个<menupopup>用于窗口中的多个不同项目。 在那种情况下， <menupopup>是一个相当大的 XUL 代码，我不想在窗口的 XUL 中重复和维护多个重复项。

选择的<menuitem>的value ：

您的实际问题是如何获取用户选择的<menuitem>的value 。 下面的所有代码都经过测试并且可以正常运行。 正如您从代码中看到的，您可以从以下位置获取您选择（在选择时）的<menuitem>的value ： event.target.value 。

使用<menulist>元素：

最常用的元素是<menulist> 。 这通常用于让用户从多个选项中选择一个将被记住并稍后使用的选项，或者用于调整用户界面中显示的内容。 它通常不会用于从多个即时操作（已执行但未记住选择）中进行选择。 <menulist>是 MDN 上<menuitem>和<menupopup>示例中使用的内容。

<menulist id="bid2" oncommand="alert(event.target.value)" >
    <menupopup>
              <menuitem label="one" value="one" />  
              <menuitem label="two" value="two" />
              <menuitem label="three" value="three" />
    </menupopup>
</menulist>

当你点击它时，上面的代码会给你一个看起来像一个带有<menuitem>条目选择的按钮。 它将用您选择的<menuitem>的值<menuitem> alert 。

这将产生一个看起来像这样的项目：

您可以单击以打开下拉列表：

如果您选择一个项目：

您将收到警报：

然后对象将显示您的选择：

使用<button>元素：

也可以使用指定了属性type="menu"或type="menu-button"的<button>元素。 然而，这不会向用户提供关于当前选择了哪个选项的视觉反馈。 [注意：您的 JavaScript 可以手动更改<button> label属性以提供此反馈。] 如果按钮产生即时操作而不是记住的选择，您可以使用这种类型的元素。

编码：

<button type="menu" id="bid2" label="A Button" oncommand="alert(event.target.value)">
    <menupopup>
              <menuitem label="one" value="one" /> 
              <menuitem label="two" value="two" />
              <menuitem label="three" value="three" />
    </menupopup>
</button>

这将产生一个看起来像这样的项目：

您可以单击以打开下拉列表：

如果您选择一个项目：

您将收到警报：

然后该对象将不会显示您的选择：

如果要设置<button>的标签以反映用户所做的选择，可以使用：

<button type="menu" id="bid2" label="A Button" oncommand="event.target.parentElement.parentElement.label=event.target.value;alert(event.target.value)">
    <menupopup>
              <menuitem label="one" value="one" /> 
              <menuitem label="two" value="two" />
              <menuitem label="three" value="three" />
    </menupopup>
</button>

选择three ，将导致按钮看起来像：

使用<toolbarbutton> ：

或者，您可以使用<toolbarbutton> 。

当不悬停时，这样做看起来像：

悬停时：

打开供选择时：

UI设计中的选择：

在设计用户界面时，您必须做出许多选择。 有许多不同的方法可以获得相同的有效结果，但外观和感觉略有不同。 您真的应该自己尝试这些类型的选项。 在对XUL进行原型设计时，您可能会发现 XULRunner 程序XUL Explorer很有用。

在我看来，选择 UI 元素和外观超出了 stackoverflow 的问题范围。 虽然您可能不会获得特定的 XUL 帮助，但您可以在以下位置提出 UI 设计问题：用户体验堆栈交换。