I’m trying to create a dropdown menu on a XUL button. The dropdown menu contains several checkbox items. I want the menu to stay open until the user is done checking any boxes and clicks on the “Continue” item. The way is works now, the dropdown menu collapses whenever an item is clicked.
Here’s an example:
<button id="dropdownMenuButtonID" type="menu-button" label="Do something after selecting" oncommand="doSomething()">
<menupopup id="menuPopupID">
<menuitem label="Option 1" type="checkbox" checked="true"/>
<menuitem label="Option 2" type="checkbox" checked="true"/>
<menuitem label="Option 3" type="checkbox" checked="true"/>
<menuitem label="Option 4" type="checkbox" checked="true"/>
<menuitem label="Continue" oncommand="collapseDropdown(event)"/>
</menupopup>
</button>
<script type="text/javascript">
<![CDATA[
function collapseDropdown(event){
// Collapse the dropdown menu
event.stopPropagation();
}
function doSomething(){
// Read the values of the checked items and do something with it
}
]]>
</script>
[Image of dropdown menu button][1]
Is this even possible?
[1]: http://customsoftwareconsult.com/images/dropdown.png