J'utilise le paper-dropdown-menu
du polymère comme menu déroulant pour mon projet. Maintenant, je souhaite obtenir la valeur de l'option sélectionnée, lorsqu'un utilisateur sélectionne une option dans la liste déroulante.
Voici la structure 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>
J'ai essayé d'obtenir de la valeur en utilisant ce code:
$("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 })
Mais cela ne me donne pas la valeur du menu déroulant. Comment obtenir cela?
Dans Polymer 1.0, vous pouvez utiliser l'attribut on-iron-select
dans le paper-dropdown-menu
. Par exemple:
<paper-dropdown-menu label="Color" class="text-color-labels" on-iron-select="_itemSelected">
Fonction polymère:
_itemSelected : function(e) { var selectedItem = e.target.selectedItem; if (selectedItem) { console.log("selected: " + selectedItem.innerText); } },
Mettez à jour votre gestionnaire d'événements de la façon suivante:
$("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 })
<paper-dropdown-menu label="Color" class="text-color-labels" on-iron-select="_itemSelected">
Si vous voulez la valeur de l'élément sélectionné:
_itemSelected : function(e) { var selectedItem = e.target.selectedItem; if (selectedItem) { console.log("selected: " + selectedItem.value); } }