Dynamic Polymer 1.0动态向菜单添加选项

嗨，我在获取动态添加选项的菜单时遇到了一些问题。他们的想法是，第一个菜单的选择决定了第二个菜单包含的内容。我以前在没有聚合物的情况下成功地建造了这个。它对聚合物也有半作用。下拉列表1根据选择从json获取其内容，下拉列表2也从json获取其内容。这一部分是有效的，问题是当您从下拉列表1中进行选择，然后对其进行更改时，下拉列表2不会删除旧的选择。上次我用一个函数实现了这个功能，在重新填充内容之前，首先删除下拉列表2的所有子项。Polymer的问题是，一旦删除了子节点，下拉列表就会中断，并且不能通过数据绑定添加其他子节点。尝试添加带有普通JS的native，它填充了菜单，但是子菜单是不可选择的（从我读到的内容来看，这可能是一个bug）。此外，我认为动态项上的数据绑定也不再有效。不管怎样，这就是我所拥有的：

<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/paper-material/paper-material.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../../bower_components/iron-dropdown/demo/x-select.html">

<dom-module id="add-skill">
  <template>
    <paper-material elevation="1">
      <paper-dropdown-menu id="ddMenu" attr-for-selected="value" >
        <paper-menu class="dropdown-content" id="vendorSelect" on-iron-select="_itemSelected">
          <template is="dom-repeat" items="{{vendorList}}">
            <paper-item id="vendorName" value="item">[[item]]</paper-item>
          </template>
        </paper-menu>
      </paper-dropdown-menu>

      <paper-dropdown-menu>
        <paper-menu class="dropdown-content" id="certificationSelect" on-iron-select="_itemSelected">
        </paper-menu>
      </paper-dropdown-menu>

      <!-- testing ideas -->
      <paper-dropdown-menu>
        <paper-menu class="dropdown-content" id="test" on-iron-select="_itemSelected">
          <option extends="paper-item"> Option </option>
          <option extends="paper-item"> Option1 </option>
          <option extends="paper-item"> Option2 </option>
        </paper-menu>
      </paper-dropdown-menu>

      <paper-button on-click="_deleteElement">
        Delete
      </paper-button>
    </paper-material>
    <iron-ajax
      id="vendorSubmit"
      method="POST"
      url="../../../addskill.php"
      handle-as="json"
      on-response="handleVendorResponse"
      debounce-duration="300">
    </iron-ajax>

    <iron-ajax
      id="certificationSubmit"
      method="POST"
      url="../../../addskill.php"
      handle-as="json"
      on-response="handleCertificationResponse"
      debounce-duration="300">
    </iron-ajax>
  </template>
  <script>
    Polymer({
      is: 'add-skill',
      ready: function() {
        this.sendVendorRequest();
        this.vendorList = [];
        this.certificationList = [];
      },

      sendVendorRequest: function() {
        var datalist = 'vendor=' + encodeURIComponent('1');
        //console.log('datalist: '+datalist);
        this.$.vendorSubmit.body = datalist;
        this.$.vendorSubmit.generateRequest();
      },

      handleVendorResponse: function(request) {
        var response = request.detail.response;

        for (var i = 0; i < response.length; i++) {
          this.push('vendorList', response[i].name);
        }
      },

      vendorClick: function() {
        var item = this.$;
        //var itemx = this.$.vendorSelect.selectedItem.innerHTML;
        //console.log(item);
        //console.log(itemx);
      },

      sendCertificationRequest: function(vendor) {
        var datalist = 'vendorName=' + encodeURIComponent(vendor);
        console.log('datalist: ' + datalist);
        this.$.certificationSubmit.body = datalist;
        this.$.certificationSubmit.generateRequest();
      },

      handleCertificationResponse: function(request) {
        var response = request.detail.response;

        //var vendorSelect = document.getElementById('vendorSelect');
        for (var i = 0; i < response.length; i++) {

          this.push('certificationList', response[i].name);
        }

        console.log(this.certificationList);
      },

      _itemSelected: function(e) {
        var selectedItem = e.target.selectedItem;
        if (selectedItem) {
          this.sendCertificationRequest(selectedItem.innerText);
          console.log("selected: " + selectedItem.innerText);
        }
      },

      _removeArray: function(arr) {
        this.$.certificationList.remove();
        for (var i = 0; i < arr.length; i++) {
          console.log(arr[i]);
          arr.splice(0, i);
          arr.pop();
        }

        console.log(arr.length);
      },

      _deleteElement: function() {
        var element = document.getElementById('certificationSelect');

        while (element.firstChild) {
          element.removeChild(element.firstChild);
        }
      },

      _createElement: function() {
        var doc = document.querySelector('#test');
        var option = document.createElement('option');
        option.extends = "paper-item";
        option.innerHTML = "Option";
        doc.appendChild(option);
      }
    });
  </script>
</dom-module>

[[项目]]
选项
选择1
选择2
删除
聚合物({
是‘增加技能’，
就绪：函数（）{
这个.sendVendorRequest（）；
this.vendorList=[]；
this.certificationList=[]；
},
sendVendorRequest:函数（）{
var datalist='vendor='+encodeURIComponent（'1'）；
//log（'datalist:'+datalist）；
此.$.vendorSubmit.body=数据列表；
此.$.vendorSubmit.generateRequest（）；
},
handleVendorResponse:函数（请求）{
var response=request.detail.response；
对于（变量i=0；i

---

任何指导都是值得欣赏的

这里是的工作版本，它使用数据绑定和

动态创建新的、可选择的

元素

我不确定在使用数据绑定消除

元素时遇到了哪些具体问题，但在Polymer 1.0中需要记住的重要一点是，当修改绑定到模板的

数组（或
对象）时，需要使用（如
this.push（'arrayName'，newItem）
）以确保绑定已更新



[[项目]]
添加
聚合物({
_createItem:function（）{
this.push（“\u menuItems”，“New Option”+this.\u menuItems.length）；
},
_itemSelected:函数（）{
console.log（'Selected！'）；
},
就绪：函数（）{
这._menuItems=[“第一初始选项”，“第二初始选项]；
}
});
如果您提供最少的示例，最好是托管在某个地方，这会有所帮助。我可以试试，它连接到MS SQL db中，因此必须去掉它。你建议我在哪里试一试？对不起，我在这里是比较新的OK我想我在JS-bin上有这个我刚刚添加了一个Button，它添加了一个纸张项目作为纸张菜单的一个选项。您将看到该选项已添加，但未选择Hey Jeff，感谢您的回复，我在此处编辑了您的代码，我添加了一个删除按钮，用于删除数组并删除菜单的子项。这是我第一次被卡住的地方，菜单在删除后中断，无法添加任何选项。从我的项目中，如果用户选择了其他选项，我需要清除并重新创建菜单。哦，在删除删除了我再次尝试创建纸质项目的所有子项后，忘了提及，这些子项无效。您应该使用
this.splice（“\u menuItems'，0，this.\u menuItems.length）
清空
\u menuItems
数组，这将依次清除所有的
s：如果使用绑定到crea的数组，则无需手动操作DOM