---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/list_box_layout.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/list_box_layout.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt
# Creating a custom drop-down list layout
Open in CodeSandbox
This example creates a custom layout for the drop-down list.
The layout of the control is based on its data, status, and options.
The layout is automatically rebuilt when changes are made to the values of fields, states, or options
that are used in its text template.
A drop-down list by default responds to a click on its layout and
changes the value of the field state.get('expanded').
The drop-down list is a group control, so its layout
must generate the events and implement the methods described in IGroupControlLayout.
You can use options to make settings for the drop-down list itself,
as well as for its child elements. To do this, specify the prefix 'item'
for the child elements.
{% list tabs %}
- index.html
```html
Examples. Custom drop-down list layout
```
- list_box_layout.js
```js
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map("map", {
center: [55.751574, 37.573856],
zoom: 9,
controls: [],
}),
// Creating a custom drop-down list layout.
ListBoxLayout = ymaps.templateLayoutFactory.createClass(
"" +
/**
* This element will serve as a container for list items.
* Depending on whether the list is expanded or collapsed, this container will be
* hidden or shown together with its child elements.
*/
"
",
{
build: function () {
/**
* Calling the build method of the parent class before
* performing additional actions.
*/
ListBoxLayout.superclass.build.call(this);
this.childContainerElement = $("#my-listbox").get(0);
/**
* Generating a special event that notifies the control
* of changes to the child element container.
*/
this.events.fire("childcontainerchange", {
newChildContainerElement:
this.childContainerElement,
oldChildContainerElement: null,
});
},
/**
* Overriding the interface method that returns a reference
* to the child element container.
*/
getChildContainerElement: function () {
return this.childContainerElement;
},
clear: function () {
/**
* Forcing the control to remove child elements from the parent
* before cleaning the layout.
* This will protect us from unexpected errors associated
* with the destruction of DOM elements in earlier versions of IE.
*/
this.events.fire("childcontainerchange", {
newChildContainerElement: null,
oldChildContainerElement:
this.childContainerElement,
});
this.childContainerElement = null;
/**
* Calling the "clear" method of the parent class
* after performing additional actions.
*/
ListBoxLayout.superclass.clear.call(this);
},
}
),
// Also creating a layout for a separate list item.
ListBoxItemLayout = ymaps.templateLayoutFactory.createClass(
"
"
),
// Creating two items in a drop-down list
listBoxItems = [
new ymaps.control.ListBoxItem({
data: {
content: "Moscow",
center: [55.751574, 37.573856],
zoom: 9,
},
}),
new ymaps.control.ListBoxItem({
data: {
content: "Omsk",
center: [54.990215, 73.365535],
zoom: 9,
},
}),
],
// Now we'll create a list containing the two items.
listBox = new ymaps.control.ListBox({
items: listBoxItems,
data: {
title: "Choose an item",
},
options: {
// You can use options to specify the layout directly for the list,
layout: ListBoxLayout,
/**
* or the layout for the child elements of the list. To define options for child
* elements through the parent element,
* add the 'item' prefix to option names.
*/
itemLayout: ListBoxItemLayout,
},
});
listBox.events.add("click", function (e) {
/**
* Getting a reference to the clicked object.
* List item events propagate and can be
* listened to on the parent element.
*/
var item = e.get("target");
// A click on the drop-down list title does not need to be processed.
if (item != listBox) {
myMap.setCenter(item.data.get("center"), item.data.get("zoom"));
}
});
myMap.controls.add(listBox, { float: "left" });
}
```
{% endlist %}