Как я могу сбросить раскрывающееся меню бумаги в Polymer, чтобы ничего не было выбрано?

Я хотел бы сбросить раскрывающееся меню полимерной бумаги в исходное состояние в JavaScript, чтобы ничего не было выбрано, поэтому оно выглядит так:

paper-dropdown-menu ничего не выбрано

Я могу добавить идентификатор к тегу бумажного меню внутри раскрывающегося меню бумаги, получить к нему доступ в JavaScript и выбрать его выбранный индекс:

document.getElementById("accountTypeMenu").selected = 1;

Однако я могу выбрать только доступный элемент, поэтому число должно быть 0 или больше. Я не могу установить его в -1, чтобы ничего не выбирать, чтобы визуально вернуть его в исходное состояние, но я могу записать выбранное состояние в то, что я только что установил. Другие значения, которые я пытался изменить для выбранного, равны null и undefined.

Вот HTML-код, который я использую для раскрывающегося меню бумаги:

<paper-dropdown-menu 
id="accountTypeDropdown"
selected-item="{{selectedItem}}"
selected-item-label="{{selected}}"
label='&#65290;Account type' 
style="width:50%;"
noink 
no-animations>

    <paper-menu id="accountTypeMenu"
                class="dropdown-content"
                onmouseup="requiredMenuFieldSelected('accountType')">
                        <template is="dom-repeat"
                                  items="{{accountTypes}}"
                                  as="accountType">
                            <paper-item value="[[accountType.id]]">[[accountType.name]]</paper-item>
                        </template>
    </paper-menu>

</paper-dropdown-menu>

<input is="iron-input" 
       name="accountType" 
       type="hidden" 
       value$="[[selectedItem.value]]">

menu dropdown selected reset polymer-1.0
person Chewie The Chorkie    schedule 21.10.2015    source источник

Ответы (3)


arrow_upward
9
arrow_downward

Это только готовое поле. Таким образом, вам, возможно, придется использовать функцию, предоставляемую Polymer, для установки только готовых значений. Попробуйте следующее

document.getElementById("accountTypeDropdown")._setSelectedItem({});

Если вышеперечисленное не работает, попробуйте другие варианты, как показано ниже.

document.getElementById("accountTypeDropdown")._setSelectedItem(null);
document.getElementById("accountTypeDropdown")._setSelectedItem();
person Srik    schedule 21.10.2015
comment
Спасибо! document.getElementById (accountTypeDropdown) ._ setSelectedItem (null); работает! - person Chewie The Chorkie; 22.10.2015
comment
Сброс работает с _setSelectedItem (null), однако есть одна странность. Установка нового значения после изменения модели работает только в том случае, если новое значение отличается от значения до сброса. Я установил тестовый пример здесь: pm.yves.glodt.name - person yglodt; 05.02.2016
comment
Попробуйте добавить selected={{selectedMenu}} на paper-menu. И установите selectedMenu=null всякий раз, когда вы хотите сбросить элемент. - person Srik; 05.02.2016

arrow_upward
4
arrow_downward

В настоящее время кажется, что лучше использовать <paper-listbox></paper-listbox>.

С его помощью вы можете просто установить selected на null:

<paper-dropdown-menu label="Type">
    <paper-listbox class="dropdown-content" selected="{{myObj.type}}" attr-for-selected="value" id="list">
        <paper-item value="0">Type 0</paper-item>
        <paper-item value="1">Type 1</paper-item>
    </paper-listbox>
</paper-dropdown-menu>

А потом в JavaScript:

this.$.list.selected = null;
person yglodt    schedule 24.02.2018

arrow_upward
1
arrow_downward

Вы можете вручную вызвать событие:

document.querySelector("#accountTypeDropdown")._onIronDeselect();
person ANTARA    schedule 23.12.2015