2014-12-04 179 views
3

我的期望是在頁面加載後默認選擇'選項1'。這不是正在發生的事情。而是顯示標籤,而不是基於紙張項目值屬性的選定選項。紙張下拉菜單默認選擇的選項不起作用

<paper-dropdown-menu name="dropdown" label="Dropdown" selected='1' valueattr='value'> 
    <paper-dropdown class="dropdown"> 
     <core-menu class="menu"> 
      <paper-item value="1">Option 1</paper-item> 
      <paper-item value="2">Option 2</paper-item> 
     </core-menu> 
    </paper-dropdown> 
</paper-dropdown-menu> 

回答

7

selected屬性可以結合使用具有延伸<core-selector>控制什麼選出的一種元素。在您示例中使用的元素集中,<core-menu><core-selector>的擴展元素,因此您需要設置selected屬性。

這裏有一個修改示例如預期那樣工作:

<!doctype html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Polymer Demo</title> 
 
    </head> 
 
    <body> 
 
    <script src="//www.polymer-project.org/webcomponents.js"></script> 
 
    <link rel="import" href="//www.polymer-project.org/components/paper-dropdown-menu/paper-dropdown-menu.html"> 
 
    <link rel="import" href="//www.polymer-project.org/components/paper-dropdown/paper-dropdown.html"> 
 
    <link rel="import" href="//www.polymer-project.org/components/core-menu/core-menu.html"> 
 
    <link rel="import" href="//www.polymer-project.org/components/paper-item/paper-item.html"> 
 
    
 
    <h1>Dropdown Menu</h1> 
 
    <paper-dropdown-menu label="Select an item"> 
 
     <paper-dropdown class="dropdown"> 
 
     <core-menu class="menu" selected="1" valueattr="value"> 
 
      <paper-item value="1">Option 1</paper-item> 
 
      <paper-item value="2">Option 2</paper-item> 
 
     </core-menu> 
 
     </paper-dropdown> 
 
    </paper-dropdown-menu> 
 
    </body> 
 
</html>

請注意,您還需要設置valueattr="value"<core-menu>,表明每個<core-menu>孩子都value屬性設置對應於將傳遞給select屬性的內容。 (默認值是valueattr="name"這就要求你在每個<paper-item> S的設置name屬性。)

6

這裏是聚合物1.0 paper-dropdown-menu

<paper-dropdown-menu label="Select an item" placeholder="Donut" > 
    <paper-menu class="dropdown-content" selected="2" attr-for-selected="data-value"> 
    <paper-item data-value="1">Croissant</paper-item> 
    <paper-item data-value="2">Donut</paper-item> 
    <paper-item data-value="3">Financier</paper-item> 
    <paper-item data-value="4">Madeleine</paper-item> 
    </paper-menu> 
</paper-dropdown-menu> 
+1

所以你必須明確地設置佔位符的更新?聚合物正在殺死我。 – Gilberg 2015-08-27 18:56:07

+1

您是否嘗試過綁定功能?例如。 'placeholder =「{{myVar}}」'見https://www.polymer-project.org/1.0/docs/devguide/data-binding.html – 2015-08-27 22:56:28

+0

@DavidDouglas是否可以取消選擇紙下拉?將myVar指定爲null對我來說不起作用。 – lionheart 2015-09-30 15:57:58