Bitrix UI - IlyaKovanov/lib GitHub Wiki

Select

<?
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>
    BX.ready(function() {
        var filter = BX('filter'),
            submit = BX('update_filter');

        BX.bind(submit, 'click', function() {
            var fields = BX.findChildren(filter, {
                attribute: 'data-name',
                className: 'main-ui-control'
            }, true);

            fields.forEach(function(element){
                console.log(element.getAttribute('data-name'));
                console.log(JSON.parse(element.getAttribute('data-value')));
            });
        })
    })
</script>
⚠️ **GitHub.com Fallback** ⚠️