Question

我的期望是，一旦页面加载，默认情况下会选择“选项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>

Answer 1

selected属性可以与扩展<core-selector>的元素结合使用，以控制所选内容。在您的示例中使用的元素集中，<core-menu>是扩展<core-selector>的元素，因此您需要在其上设置selected属性。

这是一个按预期工作的修改示例：

＆＃13;

<!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>

＆＃13;

请注意，您还需要在<core-menu>上设置valueattr="value"，以表明每个<core-menu>子项都设置了value个属性，这些属性与传入的属性相对应到select属性。（默认值为valueattr="name"，这需要您在每个name上设置<paper-item>属性。）

Answer 2

以下是Polymer 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>

纸张下拉菜单默认选择的选项不起作用

2 个答案: