Очистить значение раскрывающегося меню бумаги

Я не могу найти способ очистить выпадающее меню бумаги. Я хотел бы сбросить его в исходное состояние при отправке моей формы (ajax). Я ничего не могу найти в демо или документации.

Я использую метеор и полимер 1.0.

Большое спасибо

Вот код:

            <paper-dropdown-menu label="List's Color Tag" id="colorTag">
                <paper-menu class="dropdown-content">
                    {{#each colors}}
                        <paper-item>{{.}}</paper-item>
                    {{/each}}
                </paper-menu>
            </paper-dropdown-menu>

meteor polymer polymer-1.0
person Alexandre Huot    schedule 11.09.2015    source источник
comment
Можете ли вы предоставить больше контекста? Может быть, с некоторыми фрагментами вашего кода или plunker/jsfiddle...   -  person Lucas Blancas    schedule 12.09.2015

Ответы (3)


arrow_upward
3
arrow_downward

Установите для текущего выбранного элемента значение null. Это было недавно исправлено. https://github.com/PolymerElements/paper-dropdown-menu/pull/47

person Jeremy Odekirk    schedule 02.10.2015
comment
Даже если я даю раскрывающемуся меню бумаги идентификатор, например раскрывающийся список, и делаю document.getElementById(dropdown).selected = null;, это не имеет никакого эффекта. Я просмотрел github, но не могу найти четких примеров; изменяется только сам Polymer. - person Chewie The Chorkie; 21.10.2015
comment
Что-то вроде этого может сработать: document.querySelector('paper-dropdown-menu')._setSelectedItem(null); - person Jeremy Odekirk; 21.10.2015

arrow_upward
1
arrow_downward

У меня была аналогичная проблема, и я довольно глубоко копался в коде полимера - похоже, что это невозможно сделать. Я нашел довольно грязный обходной путь, используя невидимый элемент, но, возможно, он поможет вам:

 <paper-dropdown-menu label="List's Color Tag" id="colorTag">
                <paper-menu class="dropdown-content">
                   <paper-item style="display:none"></paper-item>
                    {{#each colors}}
                        <paper-item>{{.}}</paper-item>
                    {{/each}}
                </paper-menu>
            </paper-dropdown-menu>

Затем вы сможете настроить его так, чтобы он ничего не отображал, как выбрано, позвонив

document.getElementById('colorTag').contentElement.selected = 0;

Я надеюсь, что это работает для вас, это не проверено полностью, так как я не использую Meteor и использую специальные идентификаторы. Я установил для невидимого элемента идентификатор -1, чтобы он не мешал другим моим идентификаторам.

Итак, в моем случае это выглядит так:

<paper-dropdown-menu id="carSelector"
                             label="[[label]]" attr-for-selected="car-id"
                             selected="{{selectedId}}" always-float-label
                >
            <paper-menu attr-for-selected="car-id"
                        selected="{{selectedId}}" class="dropdown-content">
                <paper-item car-id="-1" style="display:none"></paper-item>
                <template is="dom-repeat" items="[[cars]]" as="c">
                    <paper-item car-id$="[[c.Id]]">
                        <paper-item-body>
                            [[c.Plate]]
                        </paper-item-body>
                    </paper-item>
                </template>
            </paper-menu>
</paper-dropdown-menu>

И соответствующий вызов:

this.selectedId=-1;
person Compufreak    schedule 15.09.2015

arrow_upward
1
arrow_downward

Вы должны добавить атрибут selected к первым дочерним элементам paper-drop-down (в данном случае paper-menu)

<paper-dropdown-menu label="List's Color Tag" id="colorTag">
 <paper-menu class="dropdown-content" selected="{{selectedItem}}">
   {{#each colors}}
   <paper-item>{{.}}</paper-item>
   {{/each}}
  </paper-menu>
</paper-dropdown-menu>

Затем, когда вы хотите сбросить его, просто присвойте значению selectedItem значение null.

this.selectedItem = null
person Dade    schedule 15.11.2016