Skip to content

Instantly share code, notes, and snippets.

@AlonsoMackenlly
Forked from konratnox/index.php
Last active March 1, 2021 06:53
Show Gist options
  • Save AlonsoMackenlly/fa971451f53f046bd56f1f93c2f7a2ad to your computer and use it in GitHub Desktop.
Save AlonsoMackenlly/fa971451f53f046bd56f1f93c2f7a2ad to your computer and use it in GitHub Desktop.
Выпадающий список выбора в Битриксе
<?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>
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);
}
});
}
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment