Having trouble retrieving multiple selected values from the paper listbox in Polymer 3

I'm attempting to retrieve multiple selected values in a paper-listbox element in Polymer.

 <paper-dropdown-menu label="{{_getLabel('Activity Type')}}" id="fromMenu" on-paper-dropdown-close="fromAccountChanged" searchable="true"> 
          <paper-listbox selected="{{value}}"  id="ddtype" on-iron-select="SelectedType"  attr-for-selected="value" selected="{{typeList}}" class="dropdown-content" slot="dropdown-content" multi>
            <template is="dom-repeat" items="{{typeList}}">
              <paper-item value="{{item}}">{{item}}</paper-item>
            </template>
          </paper-listbox>
        </paper-dropdown-menu>



SelectedType(e){
var selectedItem = e.target.selectedItem;
console.log(selectedItem.value)
var product_value = selectedItem.value;
this.searchTypeString = selectedItem.value;

}

This is the function I am using to fetch values, but I am only able to retrieve a single value.

Answer №1

If you want to retrieve the chosen paper-item elements, you can utilize the selectedItems property. Alternatively, for obtaining the values of the selected paper-items, you should make use of the selectedValues property. More details can be found in the documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with the position function in JavaScript?

I'm working on creating a small game, but I've encountered some difficulties at the start. Every time I attempt to obtain the position of track or trackCont, it consistently returns x: 0, y: 0. The DIV doesn't move to the correct position w ...

JavaScript CompleteLink message

Hey there, I've come across a JavaScript code for a countdown timer but need some assistance with it. The issue I'm facing is that within the code, there's a line that displays a message to the user when the timer reaches zero. I want to kn ...

When you try to combine Angular services, they tend to malfunction

I have two different services that I need to distribute using bower: Categories (categories.service.js) and Product (product.service.js). Both of them are structured similarly, as shown below: (function() { 'use strict'; angular .modul ...

Updating cluetip content post webpage loading

I need to update the content within a cluetip after the page has finished loading. Imagine there's a button inside the cluetip and upon clicking it, I want it to disappear. Here is the cluetip setup: $('a.notice_tooltip').cluetip({activa ...

Obtain template from AngularJS and transmit data to template

<section ng-app="app" ng-controller="ctrl"> <div id="output">{{ foo }}</div> <button ng-click="myFun()">Click me</button> </section> var app = angular.module("app", []); app.controller('ctrl', funct ...

Error encountered in Chrome while trying to fetch Next.js PWA with the use of next-pwa: Unhandled TypeError

Hello, I was recently working on a Next.js project and attempted to convert it into a PWA using next-pwa. To start off, I created the next.config.js file. const withPWA = require('next- pwa'); module.exports = withPWA({ pwa: { dest: ...

Delete the parent div when the button is clicked

trying to create a dynamic button system to add/remove inputs on clicks. I have the addButton working but not the deleteButton. What am I missing? $(document).ready(function() { var maxFields = 20; var addButton = $('#plusOne'); va ...

Is it possible to synchronize Vue data values with global store state values?

I need help updating my data values with values from store.js. Whenever I try the code below, I keep getting a blank page error. Here's how I have it set up in App.vue: data() { return { storeState: store.state, Counter: this.storeState.C ...

ClassNames Central - showcasing a variety of class names for interpolation variables

Seeking guidance on creating a conditional statement to set the className for a div element. The conditional is functioning correctly, and I can see the className being assigned properly in the developer console. However, I am struggling to return it as ...

Simple steps to add a click event listener to every element within a div

I need to assign a click handler to multiple elements and perform different actions based on which one is clicked. To illustrate, I can create an alert displaying the class of the button that was clicked. The elements I am working with have a similar str ...

The variable "drupalSettings" is not defined and is causing an error "no-undef"

I am working on a single page app that needs to run within every Drupal node of a specific content type. This app is built using React and Yarn. Within my index.js file, I have the following code snippet: if(window.location.href !== 'http://localho ...

What is the best way to restrict datalist options while preserving the "value" functionality?

After finding a creative solution by @Olli on Limit total entries displayed by datalist, I successfully managed to restrict the number of suggestions presented by a datalist. The issue arises from the fact that this solution only covers searching through ...

To extract three records from storage and store them in the dbResult using a promise join technique

How can I efficiently retrieve and store 3 records in dbResult using promise join? Currently, I have code that retrieves a single record as shown below: req.oracleMobile.storage.getById(registry.getIncidentPhotoStorageName(), incident_id + '_01&apos ...

Troubleshooting: 404 Error When Trying to Send Email with AJAX in Wordpress

In the process of creating a unique theme, I encountered an interesting challenge on my contact page. I wanted to implement an AJAX function that would allow me to send emails directly from the page itself. After conducting some research, I managed to find ...

Illuminate a corresponding regular expression within a text input

I currently have a functional code for testing regex, which highlights matching patterns. However, my challenge lies in highlighting the result within the same input as the test string. Below you will see the HTML and JavaScript snippets along with two ima ...

Exploring the Vanilla JavaScript alternative to the jQuery.each() function

$.fn.slideUpTransition = function() { return this.each(function() { var $el = $(this); $el.css("max-height", "0"); $el.addClass("height-transition-hidden"); }); }; When utiliz ...

Running Npm watch in Laravel with Vue and Tailwind CSS will only execute one time

Encountering a strange issue with the watch command in Laravel 8 with VUE & tailwindcss. When running the cmd, it only executes once and then stops without any errors or changes. Here is the package.json content: { "private": true, "scripts": ...

I aim to conceal the Spinner feature within the service layer of Vue JS

I have a basic bootstrap Spinner.vue component <template> <div class="modal" v-if="start"> <div class="spinner-border text-info" role="status" style="width: 3rem; height: 3rem;" ...

Could the issue at hand possibly stem from the fact that the router isn't fully operational? It appears that router.query

Having trouble retrieving the parameters from the URL using router.query. I've tried various approaches but keep getting an undefined result. It seems like I'm on the right track, though. Highlighted query param in yellow... https://i.stack.img ...

Adding a trailing slash to the URL in an Express server causes it to be appended

I've encountered a strange issue with my express server. Whenever I try to use a specific URL route with the word 'bind,' an extra '/' is automatically added to it. This behavior isn't happening with other URLs that I've ...