XUL listbox

The listbox element describes a list or table with one or more columns.

The listbox has several children elements:

• The listhead element describes the header of a listbox
• The listheader element describes one columns definition in the header of a listbox
• The listitem element describes one item in a listbox
• The listcell element describes one cell in an item for a multicolumn listbox

There are several ways to define a listbox:

• Without a header and only one column
• With a header and only one column
• With several columns

Listbox declarations

Without a header and only one column

In this case, there is only one listbox element and one listitem element for each row.

With a header and only one column

In this case, there is:

• One listbox element
• One listhead element to declare the headers
• One listheader element under the listhead element to declare the unique header
• One listitem element for each row

With a header and several columns

In this case, there is:

• One listbox element
• One listhead element to declare the headers
• One listheader element under the listhead element for each column header
• One listitem element for each row
• One listcell element under the listitem element for each cell

onselect event

The onselect command on the listbox allows to listen to row selection events. For example:

      <window id="hello" 
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
         <script>
      function select() {
        var index = document.getElementById("theList").currentIndex;
        print("selected " + index);
      }
         </script>       
         <listbox id="theList" onselect="select()">
            <listitem label="Ruby"/>
            <listitem label="Emerald"/>
            <listitem label="Sapphire" selected="true"/>
            <listitem label="Diamond"/>
         </listbox>      
      </window>

Examples

Example without a header

      <listbox">
         <listitem label="Ruby"/>
         <listitem label="Emerald"/>
         <listitem label="Sapphire" selected="true"/>
         <listitem label="Diamond"/>
      </listbox>

The result is:

Example with a header

      <listbox id="theList">
         <listhead>
            <listheader label="Color"/>
         </listhead>      
         <listitem label="Ruby"/>
         <listitem label="Emerald"/>
         <listitem label="Sapphire" selected="true"/>
         <listitem label="Diamond"/>
      </listbox>

The result is:

Example with several columns

      <listbox id="theList">
         <listhead>
            <listheader label="Name"/>
            <listheader label="Age"/>
            <listheader label="City"/>
         </listhead>
         <listitem>
            <listcell label="Julia"/>
            <listcell label="19"/>
            <listcell label="Boston"/>
         </listitem>
         <listitem>
            <listcell label="Sandra"/>
            <listcell label="25"/>
            <listcell label="London"/>
         </listitem>
         <listitem>
            <listcell label="Sharon"/>
            <listcell label="35"/>
            <listcell label="Paris"/>
         </listitem>
      </listbox>

The result is: