javascript vertical Ottieni il valore selezionato del menu a discesa della carta




sidebar dropdown menu html (3)

Sto usando il paper-dropdown-menu di paper-dropdown-menu del polimero come paper-dropdown-menu a discesa per il mio progetto. Ora voglio ottenere il valore dell'opzione selezionata, quando un utente seleziona un'opzione dal menu a discesa.

Ecco la struttura HTML

<paper-dropdown-menu label="Color" class="text-color-labels">
    <paper-dropdown class="dropdown">
        <core-menu class="menu" id="textColor">
            <paper-item value="#000000">Black</paper-item>
            <paper-item value="#522A19">Dark Brown</paper-item>
            <paper-item value="#7D331E">Light Brown</paper-item>
            <paper-item value="#EDCCBA">Tan</paper-item>
            <paper-item value="#B89325">Old Gold</paper-item>
            <paper-item value="#B7A967">Vegas Gold</paper-item>
            <paper-item value="#29753A">Kelly Green</paper-item>
        </core-menu>
    </paper-dropdown>
</paper-dropdown-menu>

Ho cercato di ottenere valore utilizzando questo codice:

$("body").on("core-select", ".text-color-labels", function(){
    var selectedItem = document.querySelector('#textColor').selectedItem;
    var selectedColor = selectedItem.textContent;
    console.log(selectedColor); //gives Black, Dark Brown, Light Brown etc
})

Ma non mi dà il valore del menu a discesa. Come ottenerlo?


<paper-dropdown-menu label="Color" class="text-color-labels" on-iron-select="_itemSelected">

Se si desidera il valore dell'articolo selezionato:

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

Aggiorna il tuo gestore di eventi in questo modo:

$("body").on("core-select", ".text-color-labels", function(e) {
    var selectedItem = e.target.selected,
        selectedColor = selectedItem.textContent;
    console.log(selectedColor); //gives Black, Dark Brown, Light Brown etc
})

In Polymer 1.0 puoi usare on-iron-select attributo on-iron-select nel paper-dropdown-menu . Per esempio:

<paper-dropdown-menu label="Color" class="text-color-labels" on-iron-select="_itemSelected">

Funzione del polimero:

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




polymer