如何在表单提交中包含Polymer paper-dropdown-menu

ygl*_*odt 5 html5 polymer

当我提交这个带有document.getElementById("form").submit();firstName的last 表单时,lastName包含在POST数据中,但是paper-dropdown-menu中的title-value没有.缺什么 ?

<form is="iron-form" id="form" method="post" action="/edit">
    <paper-dropdown-menu name="title" label="Title">
        <paper-menu class="dropdown-content">
            <template is="dom-repeat" items="{{titles}}" as="title">
                <paper-item value="{{item.id}}">{{title.name}}</paper-item>
            </template>
        </paper-menu>
    </paper-dropdown-menu>
    <paper-input name="firstName" label="First name"></paper-input>
    <paper-input name="lastName" label="Last name"></paper-input>
    <paper-button raised onclick="submitForm()">Save</paper-button>
</form>
Run Code Online (Sandbox Code Playgroud)

编辑:

在这里,我完整的工作实例,非常感谢@Brandon的回答:

<form is="iron-form" id="form" method="post" action="/api/edit">
    <paper-dropdown-menu label="Title" selected-item="{{selectedItem}}" selected-item-label="{{selected}}">
        <paper-menu class="dropdown-content">
            <template is="dom-repeat" items="{{titles}}" as="title">
                <paper-item value="[[title.id]]">[[title.name]]</paper-item>
            </template>
        </paper-menu>
    </paper-dropdown-menu>
    <input is="iron-input" name="title" type="hidden" value$="[[selectedItem.value]]">
    <paper-input name="firstName" label="First name"></paper-input>
    <paper-input name="lastName" label="Last name"></paper-input>
    <paper-button raised onclick="document.getElementById('form').submit()">Save</paper-button>
</form>
Run Code Online (Sandbox Code Playgroud)

Bra*_*don 7

这可以解决您的问题.创建隐藏的输入元素,并将所选项目分配给隐藏元素的值.这为您提供了铁输入验证器的额外好处,可用于未来表格的多选.

<form is="iron-form" id="form" method="post" action="/edit">
    <paper-dropdown-menu label="Title" selected-item-label="{{selected}}">
        <paper-menu class="dropdown-content">
            <template is="dom-repeat" items="{{titles}}" as="title">
                <paper-item>{{title.name}}</paper-item>
            </template>
        </paper-menu>
    </paper-dropdown-menu>
    <input is="iron-input" name="title" type="hidden" value$="[[selected]]">
    <paper-input name="firstName" label="First name"></paper-input>
    <paper-input name="lastName" label="Last name"></paper-input>
    <paper-button raised onclick="submitForm()">Save</paper-button>
</form>
Run Code Online (Sandbox Code Playgroud)

  • 不是问题.使用原始paper-item元素(带有value属性)更改:<paper-dropdown-menu label ="Title"selected-item ="{{selectedItem}} selected-item-label ="{{selected}}"> <input is ="iron-input"name ="title"type ="hidden"value $ ="[[selectedItem.value]]">这里的工作示例:http://jsbin.com/luvuvo/edit?html,产量 (2认同)