From Documentation



Selectbox is a lightweight dropdown list and it can support ListModel, Renderer, and Databinding as well. The benefit of it is not to create child widgets for each data, so the memory usage is much lower at the server.



		String[] userName = { "Tony", "Ryan", "Jumper", "Wing", "Sam" };
		ListModelList model = new ListModelList(userName);
	<selectbox model="${model}" onSelect='alert(model.get(event.getData()));'>
		<template name="model">
			Name is ${each}

To give the selectbox an initial value, for example, Tony, add the following code after the model is created:

model.addToSelection ("Tony");

Data binding

Here is the MVVM way:

    public class MyUserBean {
        private String[] userList = { "Tony", "Ryan", "Jumper", "Wing", "Sam" };
        private int index = 0;

        public ListModelList getUserList() {
            return new ListModelList(Arrays.asList(userList));

        public void setUserList() {

        public void setIndex(int ind) {
            index = ind;

        public int getIndex() {
            return index;

    MyUserBean mybean = new MyUserBean();
/**   Implements ItemRenderer without using template
       org.zkoss.zul.ItemRenderer render = new org.zkoss.zul.ItemRenderer() {
        public String render(Component owner, Object data, int index) throws Exception {
            return data.toString();
    <div apply="org.zkoss.bind.BindComposer">
        Select User:
        <selectbox id="box" model="@init(mybean.userList)"
            <template name="model">${each}</template>

    <label id="val" value="@load(mybean.index)" />

Render HTML Fragment

This component's default ItemRenderer directly renders a model's data into an HTML snippet, hence if your model data contains those characters that need to be escaped like < > &, you need to escape by yourself.

If you want to render different HTML elements for each item on your own, see ItemRenderer.


The item renderer is used to render each item's HTML content. See ZK Developer's Reference/MVC/View/Renderer/Item Renderer.

If you just want to customize the rendered text, see Model Template.

Supported Events

Event Type
Event: SelectEvent

Notifies one that the user has selected a new item in the selectbox.

Supported Children


Use Cases

Version Description Example Location

Version History

Last Update : 2023/05/05

Version Date Content
6.0.0 October 4, 2011 Add the new Selectbox component
6.0.0-RC2 December 6, 2011 Rename OptionRenderer to ItemRenderer

Last Update : 2023/05/05

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.