How to make the coordinates on the Yandex map change when the li element is selected?

Question

css

Greetings colleagues! The essence of the question, there is a drop-down list ul li in which you can select several cities, you need the coordinates of the mark on the Yandex map to automatically change when you select a city from the list. Please help with a concrete example. Thank you in advance :)
UPD: unfortunately not the city, I did not put it correctly. The company has offices in different cities. And when choosing, let's say the city of Moscow from the drop-down list, the site changes the phone number, email, address. But since it also contains a map, it is logical to change the map as well. That is, in fact, I need to send some kind of signal to the Yandex map so that it changes the focus point to other coordinates.

Answer 1

Thanks, did. I needed this.

<ul class="city-box">
                <li class="city-inside-box">Ваш город <span class="city-style">Новосибирск</span><i class="fa fa-sort-desc" aria-hidden="true"></i></li>
                <ul class="cities_list">
        						<li alt="ул. Б. Богаткова, д.24/1" phone="8 [phone]" email="[email protected]" id="novosibirsk">Новосибирск</li>
        						<li alt="ул. Крылова, 47а оф. 607" phone="8 [phone]" email="[email protected]" id="abakan">Абакан</li>
        						<li alt="ул. Лапина, д. 8, оф. 15" phone="8 [phone]" email="[email protected]" id="irkutsk">Иркутск</li>
        						<li alt="ул. Тигровая, д. 29, оф. 11 " phone="8 [phone]" email="[email protected]" id="vladivostok">Владивосток</li>

        					</ul>

                <li class="phone-box"><i class="fa fa-mobile" aria-hidden="true"></i><span>	8 [phone]</span></li>
                <li class="mail-box"><i class="fa fa-envelope" aria-hidden="true"></i><span>[email protected]</span></li>
                <li class="marker-box"><i class="fa fa-map-marker" aria-hidden="true"></i><a href="#maps"><span>ул. Б. Богаткова, д.24/1</span></a></li>

              </ul>

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [55.010906, 82.944415],
            zoom: 14
        }, {
            searchControlProvider: 'yandex#search'
        }),
        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            hintContent: 'ООО Сиб',
            balloonContent: 'Ул.Бориса Богаткова 24/1'
        });
        document.getElementById('irkutsk').onclick = function () {
        // Для уничтожения используется метод destroy.
        myMap.setCenter([52.279611, 104.285547], 15, {
        		searchControlProvider: 'yandex#search'
          });
        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            hintContent: 'ООО Сиб',
            balloonContent: 'ул. Лапина, д. 8, оф. 15'
        });
        myMap.geoObjects.add(myPlacemark);
        myPlacemark.balloon.open();
      };
      document.getElementById('abakan').onclick = function () {
        // Для уничтожения используется метод destroy.
        myMap.setCenter([53.733745, 91.437465], 15, {
        		searchControlProvider: 'yandex#search'
          });
        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            hintContent: 'ООО Сиб',
            balloonContent: 'ул. Крылова, д. 47а, оф. 607'
        });
        myMap.geoObjects.add(myPlacemark);
        myPlacemark.balloon.open();
      };
      document.getElementById('vladivostok').onclick = function () {
        // Для уничтожения используется метод destroy.
        myMap.setCenter([43.116687, 131.878954], 15, {
        		searchControlProvider: 'yandex#search'
          });
        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            hintContent: 'ООО Сиб',
            balloonContent: 'ул. Тигровая, д. 29, оф. 11'
        });
        myMap.geoObjects.add(myPlacemark);
        myPlacemark.balloon.open();
      };
      document.getElementById('novosibirsk').onclick = function () {
        // Для уничтожения используется метод destroy.
        myMap.setCenter([55.010906, 82.944415], 14, {
        		searchControlProvider: 'yandex#search'
          });
        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            hintContent: 'ООО Сиб',
            balloonContent: 'Ул.Бориса Богаткова 24/1'
        });
        myMap.geoObjects.add(myPlacemark);
        myPlacemark.balloon.open();
      };
    myMap.geoObjects.add(myPlacemark);
    myPlacemark.balloon.open();
});

Answer 2

If cities are supposed to be selected, then you can use the geocode method . It returns a promise, with the resolution of which you can set the coordinates of the map center, taken from the received geo object.
Am I understanding the question correctly?