Изчистване на стойността на падащото меню за хартия

Не мога да намеря начин да изчистя падащо меню на хартия. Бих искал да го върна до първоначалното му състояние, когато формулярът ми бъде изпратен (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

Задайте текущия избран елемент на нула. Това наскоро беше коригирано. https://github.com/PolymerElements/paper-dropdown-menu/pull/47

person Jeremy Odekirk    schedule 02.10.2015
comment
Дори ако дам на paper-dropdown-menu id като падащо меню и направя document.getElementById(dropdown).selected = null;, това няма ефект. Прегледах github, но не мога да намеря ясни примери за него; само промени в самия полимер. - 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 и използвам специални идентификатори. Зададох невидимия елемент да има ID -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