title: Polymer 1.0 dynamically add options to menu
body: <p>Hi I am having some trouble getting a menu to add options dynamically. They idea is the selection of the first menu decides what the second menu contains. I have built this before successfully without polymer. And it semi-works with polymer. dropdown one gets its content from json based on the selection, dropdown two gets its content also from a json. This part works, the issue is when you make a selection from dropdown one and then change it, dropdown two doesn't delete the old selection. I got this working last time with a function that first deletes all dropdown two's children before repopulating the content. Issue with Polymer is once the childNodes are deleted the dropdown breaks and no other children can be added via data binding. tried adding native  with plain JS which populates the menu but the children are not selectable(from what I have read this might be a bug). Also I believe data binding on dynamic items also doesnt work anymore. anyway here is what I have:</p>
  
  <pre><code>&lt;link rel="import" href="../../../bower_components/polymer/polymer.html"&gt;
  &lt;link rel="import" href="../../../bower_components/paper-material/paper-material.html"&gt;
  &lt;link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"&gt;
  &lt;link rel="import" href="../../../bower_components/paper-menu/paper-menu.html"&gt;
  &lt;link rel="import" href="../../../bower_components/paper-item/paper-item.html"&gt;
  &lt;link rel="import" href="../../../bower_components/iron-ajax/iron-ajax.html"&gt;
  &lt;link rel="import" href="../../../bower_components/paper-button/paper-button.html"&gt;
  &lt;link rel="import" href="../../../bower_components/iron-dropdown/demo/x-select.html"&gt;
  
  &lt;dom-module id="add-skill"&gt;
    &lt;template&gt;
      &lt;paper-material elevation="1"&gt;
        &lt;paper-dropdown-menu id="ddMenu" attr-for-selected="value" &gt;
          &lt;paper-menu class="dropdown-content" id="vendorSelect" on-iron-select="_itemSelected"&gt;
            &lt;template is="dom-repeat" items="{{vendorList}}"&gt;
              &lt;paper-item id="vendorName" value="item"&gt;[[item]]&lt;/paper-item&gt;
            &lt;/template&gt;
          &lt;/paper-menu&gt;
        &lt;/paper-dropdown-menu&gt;
  
        &lt;paper-dropdown-menu&gt;
          &lt;paper-menu class="dropdown-content" id="certificationSelect" on-iron-select="_itemSelected"&gt;
          &lt;/paper-menu&gt;
        &lt;/paper-dropdown-menu&gt;
  
        &lt;!-- testing ideas --&gt;
        &lt;paper-dropdown-menu&gt;
          &lt;paper-menu class="dropdown-content" id="test" on-iron-select="_itemSelected"&gt;
            &lt;option extends="paper-item"&gt; Option &lt;/option&gt;
            &lt;option extends="paper-item"&gt; Option1 &lt;/option&gt;
            &lt;option extends="paper-item"&gt; Option2 &lt;/option&gt;
          &lt;/paper-menu&gt;
        &lt;/paper-dropdown-menu&gt;
  
        &lt;paper-button on-click="_deleteElement"&gt;
          Delete
        &lt;/paper-button&gt;
      &lt;/paper-material&gt;
      &lt;iron-ajax
        id="vendorSubmit"
        method="POST"
        url="../../../addskill.php"
        handle-as="json"
        on-response="handleVendorResponse"
        debounce-duration="300"&gt;
      &lt;/iron-ajax&gt;
  
      &lt;iron-ajax
        id="certificationSubmit"
        method="POST"
        url="../../../addskill.php"
        handle-as="json"
        on-response="handleCertificationResponse"
        debounce-duration="300"&gt;
      &lt;/iron-ajax&gt;
    &lt;/template&gt;
    &lt;script&gt;
      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 &lt; 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 &lt; 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 &lt; 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);
        }
      });
    &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>Any guidance is always appreciated</p>