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 設計問題：用戶體驗堆棧交換。