Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.11.2016, 21:38
Новичок на форуме
Отправить личное сообщение для artprog Посмотреть профиль Найти все сообщения от artprog
 
Регистрация: 28.11.2016
Сообщений: 1

Не обновляются элементы селекта
Есть блок фильтрации. В нем несколько селектов. При изменении значения в одном из них, должен меняться набор элементов в другом. Например: Меняем марку машины с BMW на KIA - в select с моделями должны подгрузиться новые значения для KIA.

Скриншот:
https://yadi.sk/i/q12cUNCzzgkkF

Функция, которая меняет значение Visible у элементов в зависимом селекте отрабатывает правильно. Но изменения отображаются только если свернуть/развернуть блок фильтрации.. Т.е. новые элементы не появляются в html сразу.

Разметка:
<form name="catalogFilterForm" class="catalog-filter-content cs-br-1" novalidate="novalidate" data-submenu-container="{'type': 'accordion'}">
    <div class="catalog-filter-block" data-ng-repeat="item in ::catalogFilter.catalogFilterData track by $index" data-ng-init="indexItem = $index">
        <div submenu-parent >
            <div class="catalog-filter-block-header cs-l-1 cs-br-1" data-ng-click="submenuParent.submenu.toggle()" data-ng-if="item.Visible">
                <span class="catalog-filter-block-title" data-ng-bind="::item.Title"></span>
                <span class="catalog-filter-block-subtitle" data-ng-if="item.Subtitle != null" data-ng-bind="::item.Subtitle"></span>
                <div data-ng-if="::item.Unit.length> 1" class="catalog-filter-questian-description"> ({{::item.Unit}}) </div>
                <div data-ng-if="::item.Description.length> 1" class="catalog-filter-questian-description">
                    <div class="icon-question-after"
                         uib-popover="{{::item.Description}}" data-popover-trigger="mouseenter" data-popover-placement="top-left"></div>
                </div>
            </div>
            <div data-submenu data-ng-init="submenu.isSubmenuVisible = item.Expanded">
                <div class="catalog-filter-block-content cs-br-1" data-ng-if="submenu.isSubmenuVisible">
                    <div data-ng-class="catalogfilter.getcssclassforcontent(item.control)">                               
                        <div data-ng-if="::item.Control == 'select'">
                            <span class="select-custom icon-down-open-after-abs cs-t-8">
                                <select class="cs-bg-2" data-ng-model="item.Selected" data-ng-options="option.Text for option in ::item.Values | filter: {Visible : true}" data-ng-click="e = $event" data-ng-change="catalogFilter.clickSelect(e)">
                                    <option value="" selected>{{ ::'Js.CatalogFilter.NotSelected' | translate }}</option>
                                </select>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="catalog-filter-footer cs-br-1">
        <input type="button" class="btn btn-middle btn-submit" value="{{ ::'Js.CatalogFilter.Apply' | translate }}" data-ng-click="catalogFilter.submit()" />
        <input type="button" class="btn btn-middle btn-action" value="{{ ::'Js.CatalogFilter.Reset' | translate }}" data-ng-click="catalogFilter.reset()" />
    </div>
</form>


метод, обновляющий свойство Visible у привязанных объектов:
service.changeVisibleFilters = function (filterData)
        {
            if (filterData == null) {
                return null;
            }
            var arraySelected,
                selectedItems = [],
                selectedProperties = [],
                item,
                nameRangeMin, nameRangeMax;

            for (var i = filterData.length - 1; i >= 0; i--)
            {
                item = filterData[i];
                
                //ищем выбранные значения
                if (item.Control == 'select' || item.Control == 'selectSearch') {
                    if (item.Selected != null && item.Selected.Id !== '0') {
                        selectedItems.push(item.Selected.Id);
                        selectedProperties.push(item.PropertyId);
                    }
                }               
            }
            for (var i = 0;  i< filterData.length; i++)
            {
                var curFilter = filterData[i];
                if (curFilter.ParentPropertyId == null) continue;
                if (selectedProperties != null && selectedProperties.length > 0)
                {
                    if (selectedProperties.indexOf(curFilter.ParentPropertyId) >= 0)
                    {
                        //Проверяем, не изменилось ли значение родителя
                        var parentModificed = true;
                        for (var p = 0; p < selectedItems.length; p++) {
                            var selectedItem = selectedItems[p];
                            if (curFilter.Selected != null && curFilter.Selected.ParentPropertyValueIds.indexOf(selectedItem) >= 0) {
                                parentModificed = false;  // Если предок текущего значения выбран на верхнем уровне - не изменилось
                                break;
                            }
                        }
                        if (parentModificed) {
                            curFilter.Selected = null;
                            //curFilter.Expanded = false;
                            //curFilter.Visible = false;
                        }
                        //Перебираем значения для данного фильтра.
                        var hasValues = false;
                        for (var j = 0; j < curFilter.Values.length-1; j++)
                        {
                            var curFilterValue = curFilter.Values[j];
                            curFilterValue.Visible = false;
                            for (var p = 0; p < selectedItems.length; p++) {
                                var selectedItem = selectedItems[p];
                                if (curFilterValue.ParentPropertyValueIds.indexOf(selectedItem) >= 0) {
                                    curFilterValue.Visible = true;  // Если предок текущего значения выбран на верхнем уровне - показываем
                                    hasValues = true;
                                    break;
                                }
                            }
                        }
                        if (hasValues) {
                            curFilter.Visible = true;
                            curFilter.Expanded = true;
                            
                        }
                    }
                    else
                    {                       
                        curFilter.Visible = false;
                        curFilter.Expanded = false;
                        curFilter.Selected = null;
                    }
                    
                }
                else
                {
                    curFilter.Visible = false;
                    curFilter.Expanded = false;
                    curFilter.Selected = null;
                }
                 
            }

        };
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Исключить из переменной elems все элементы которые имеют родственные элементы с класс Fenix-77 Общие вопросы Javascript 2 12.04.2016 16:20
Как вернуть div и все вложенные в него элементы в первоначальное состояние? lucky89 Общие вопросы Javascript 17 26.02.2015 18:41
Выбрать элементы, в которые вложен элемент с id. Вадимчег jQuery 3 24.11.2012 10:38
Подстановка значений селекта solomon2 Элементы интерфейса 4 06.05.2012 17:24
Как листать элементы селекта вперед/назад? Olga_M Элементы интерфейса 5 17.10.2011 21:48