JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map"></div>

CSS

</style> <script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru-RU"></script> <script type="text/javascript" src="https://yandex.st/jquery/2.1.0/jquery.min.js"></script> <style> html, body, #map {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

JavaScript

ymaps.ready(function () {

    var map = new ymaps.Map('map', {
        center: [55.650625, 37.62708],
        zoom: 10,
        controls: []
    });



    var cityList = new ymaps.control.ListBox({
        data: {
            content: 'Выбрать город'
        },
        items: [
            new ymaps.control.ListBoxItem({ data: { id: 'id1', content: 'Москва' }}), // как добавить сюда, кроме название еще и индекс?
            new ymaps.control.ListBoxItem({ data: { id: 'id2', content:'Новосибирск' }}),
                                               new ymaps.control.ListBoxItem({ data: { id: 'id3', content:'Нью-Йорк' }})],
        options: {
            float: "left"
        }
    });

    // как тут получить событие по клику не по первому, а по всем элементам?
    cityList.events.add('select', function (e) {
        cityList.each(function(item, index) {
            console.log(item.isSelected(), index, item.data.get('id'))
        });
    });



    map.controls.add(cityList);
});