Выпадающий список выбора в Битриксе

entity_field.php

<?php
CJSCore::Init(['ui']);

$items = [
    ['NAME' => 'Первый вариант', 'VALUE' => '1'],
    ['NAME' => 'Второй вариант', 'VALUE' => '2'],
];
?>
    <div style="padding: 100px" id="filter">
        <div data-name="SELECT_SINGLE" class="main-ui-filter-wield-with-label main-ui-filter-date-group main-ui-control-field-group">
            <span class="main-ui-control-field-label">Одиночный выбор</span>
            <div data-name="SELECT_SINGLE"
                 data-items='<?= \Bitrix\Main\Web\Json::encode($items); ?>'
                 data-params='<?= \Bitrix\Main\Web\Json::encode(['isMulti' => false]); ?>'
                 id="select" class="main-ui-control main-ui-select">

                <span class="main-ui-select-name">Выберите</span>
                <span class="main-ui-square-search">
                <input type="text" tabindex="2" class="main-ui-square-search-item">
            </span>
            </div>
        </div>

        <div data-name="SELECT_MULTIPLE" class="main-ui-filter-wield-with-label main-ui-filter-date-group main-ui-control-field-group">
            <span class="main-ui-control-field-label">Множественный выбор</span>
            <div data-name="SELECT_MULTIPLE"
                 data-items='<?= \Bitrix\Main\Web\Json::encode($items); ?>'
                 data-params='<?= \Bitrix\Main\Web\Json::encode(['isMulti' => true]); ?>'
                 id="select2" class="main-ui-control main-ui-multi-select">

                <span class="main-ui-square-container"></span>
                <span class="main-ui-square-search"><input type="text" tabindex="2" class="main-ui-square-search-item"></span>
                <span class="main-ui-hide main-ui-control-value-delete"><span class="main-ui-control-value-delete-item"></span></span>
            </div>
        </div>

        <span class="ui-btn-primary ui-btn" id="update_filter">Найти</span>
    </div>

script.js

BX.ready(function() {
	// пример обработчика
	// изменение метро и района в филтре в realestate sections.php 
	BX.addCustomEvent('UI::Select::change', function(obj) { 
		var selectName = BX.data(obj.node, 'name');
		switch (selectName) {
			case 'SELECT_CITY_METRO':
				var valueId = obj.getDataValue().VALUE;
				$.post('/realestate/ajax.php', {m:'cityFilterMetro', sid:valueId}, function(d){
					if(d) {
						$('.js-metro-map').css('display', (valueId == 106 ? 'block' : 'none'));
						var $blockToInsert = $(obj.node).closest('.main-ui-custom');
						$blockToInsert.find('.js-metro-select').empty().append(d);
						cookieSet('f_city_metro', valueId);
						$('.js-sel-metro').empty();
						if(valueId == 106) {
							$('.js-col-btn-city-metro').addClass('col-xs-12').removeClass('col-xs-3');
						} else {
							$('.js-col-btn-city-metro').addClass('col-xs-3').removeClass('col-xs-12');
						}
					}
				});
		    	break;
		  	case 'SELECT_CITY_LOCATION':
		  		var valueId = obj.getDataValue().VALUE;
				if (valueId) {
					$.post('/realestate/ajax.php', {m:'cityFilterDistr', sid:valueId}, function(d){
						if(d) {
							var $blockToInsert = $(obj.node).closest('.main-ui-custom');
							$blockToInsert.find('.js-location-select').empty().append(d);
							cookieSet('f_city_distr', valueId);
						}
					});
				}
		}
	}); 
});