Polymer - DropDown

Question

I have a Polymer app. This app has a paper-dropdown-menu. I can successfully populate this drop-down with an array of values. However, I am trying to figure out how to a) set the default item to the second item in the array and b) get the item that a user chooses when they choose a different item. I've created a plunk to demonstrate. The relevant code looks like this:

    <template>
    <paper-dropdown-menu label="Please choose" on-iron-select="_onSportSelected" selected="{{ selectedSport }}">
      <paper-menu class="dropdown-content">
        <template is="dom-repeat" items="[[ sports ]]" as="sport">
          <paper-item>[[ sport.name ]]</paper-item>
        </template>
      </paper-menu>
    </paper-dropdown-menu>    
  </template>

  <script>
    Polymer({
      is: 'my-view',
      properties: {
          selectedSport: {
            type: Object,
            value: null
          },

          sports: {
            type: Array,
            value: function() {
              return [
                { id: 1, name: 'Basketball', seasonLength:6 },
                { id: 2, name: 'Football', seasonLength: 4 },
                { id: 3, name: 'Golf', seasonLength: 3 }
              ];
            }
          }
      },

      ready: function() {
         this.selectedSport = this.sports[1];
      },

      _onSportSelected: function(e) {
        console.log(e)
      }
    });
  </script>

It's weird. But, I can't figure out how to set the default selected value or get the new value once one is selected.

Answer 1

Fist of all you are missing the html import <link href="http://polygit.org/polymer/components/paper-menu/paper-menu.html" rel="import">

And the selected attribute of the paper-dropdown-menu is on the element having the class dropdown-content. You can check here : Plunkr

<dom-module id="my-view">
  <template>
    <paper-dropdown-menu label="Please choose"  on-iron-select="_onSportSelected">
      <paper-menu class="dropdown-content" selected="{{selectedSportIndex}}">
        <template is="dom-repeat" items="[[sports]]" as="sport">
          <paper-item>[[sport.name]]</paper-item>
        </template>
      </paper-menu>
    </paper-dropdown-menu>
    <br> The selected Sport is : <span>{{selectedSport.name}}</span>
  </template>

  <script>
    Polymer({
      is: 'my-view',
      properties: {
        selectedSportIndex: {
          type:Number,
          value: 1
        },
        // Object holding your selected sport
        selectedSport:{
          type:Object,
          value:null
        },
        sports: {
          type: Array,
          value: function() {
            return [{
              id: 1,
              name: 'Basketball',
              seasonLength: 6
            }, {
              id: 2,
              name: 'Football',
              seasonLength: 4
            }, {
              id: 3,
              name: 'Golf',
              seasonLength: 3
            }];
          }
        }
      },

      ready: function() {
       // this.selectedSport = this.sports[1];
      },

      _onSportSelected: function(e) {
        //display selected Item (polymer element paper-item)
        console.log(e.detail.item)
        // updating the selected sport by notifying its path
        this.set('selectedSport',this.sports[this.selectedSportIndex]);
        // view in the console
        console.log(this.sports[this.selectedSportIndex])
      }
    });
  </script>
</dom-module>