Here is a way to trigger a function when a select option is changed, passing the selected option as a parameter to the function

Question

Here is a way to trigger a function when a select option is changed, passing the selected option as a parameter to the function

Is there a way to call a function with specific parameters when the value of a select element changes in Angular?

<div class="col-sm-6 col-md-4">
  <label class="mobileNumberLabel " for="mobilrNumber">Select Service</label>
  <div class="nice-wrap">
     <select (change)="checkCategory(item.price,item.serviceName,m,k,'add');" class="js-example-basic-single nice-textbox" >
       <optgroup *ngFor="let item of serviceObject;let k = index" label='{{item.categoryName}}'>
          <option *ngFor="let service of item.services;let m = index">
            {{service.serviceName}} -&nbsp;&nbsp;{{item.categoryName}}
          </option>
       </optgroup>
     </select>
   </div>
</div>

I need to pass the price and serviceName of the selected option as parameters to the checkCategory function. Can this be achieved in Angular?

javascript angular typescript

Answer 1

Answer №1

It is important to note that passing values like item, m, k in your code may not work since they are out of scope. In this case, consider passing $event to the handler function and utilizing

event.target.selectedOptions[0].parentElement

to retrieve the selected optGroup element.

Answer 2

It is important to note that passing values like item, m, k in your code may not work since they are out of scope. In this case, consider passing $event to the handler function and utilizing

event.target.selectedOptions[0].parentElement

to retrieve the selected optGroup element.

Here is a way to trigger a function when a select option is changed, passing the selected option as a parameter to the function

Answer №1

Similar questions

Animating with CSS3 triggered by JavaScript

Leveraging RadChart dynamically within your application, without relying on HTML

The issue of drop shadows causing links to not work properly in Internet Explorer

Using ngFor in Angular 2-5 without the need for a div container wrapping

Tips on navigating to a URL with a component in React without losing the passed props

How to use mousedown event in Three.js to create line drawings

Problem Encountered with Navigation Bar following the Cloning and File Transfer in a React (Next) Project

Generating a JSON data set with two separate pieces of data, not contained within a dictionary

Analyzing conditional statements in React with State management

Control the scope value using an AngularJS directive

Validation of decimal numbers in JavaScript without the presence of any other characters

JSON conversion error: Unable to convert circular structure to JSON - locate problem within JSON structure

Getting a Node Express 404 error while attempting to display an image that was uploaded using multer

Is JQuery function running on its own or triggered by an event without manual input?

Is it a good idea to relocate the document.ready function into its own JavaScript function?

A guide to troubleshoot and resolve the 500 (Internal Server Error) encountered during an Ajax post request in Laravel

Reactjs implemented with Material UI and redux form framework, featuring a password toggle functionality without relying on hooks

What is the best method to consistently convert a deeply nested object into a tabular format that can be easily reversed

Adapting Classes in Javascript Based on Screen Width: A Step-by-Step Guide

Iterate over the table data and present it in the form of a Google