Tips for extracting the chosen text during a 'change' event

I need to access the text of the currently selected object.
When I use $(this).text(), I end up getting all available selections

I have attempted the following methods without achieving the desired result:

$(this).text()

$(this).selected()

$(this).selected().text()
$('#simpSR_CodeSet_' + id).off().on('click', function (e) {
            app.requireInput('simpSRDet_Units_' + id, false);
            app.requireInput('simpSRDet_Visits_' + id, false);
            app.requireInput('simpSRDet_Frequency_' + id, false);

            let _text = this.selected.text();

            alert(_text);

            $('#simpSRDet_Units_' + id).val('');
            $('#simpSRDet_Visits_' + id).val(1);
            $('#simpSRDet_Frequency_' + id).val(1);

            $('.srsimplediv_unit_visits_' + id).show();

        });

<script id="srsimple_ServiceTemplate" type="text/x-handlebars-template">
                        <ul class="srsimpledetail">
                            {{#services}}
                                <div id="srsimple_service_{{id}}" class="srsimpleService form">
                                    <fieldset>
                                        <dl>
                                            <dt>Service Type:</dt>
                                            <dd>
                                                <select id="simpSR_SvcServiceRequestTypeId_{{id}}"></select></dd>
                                        </dl>
                                        <dl>
                                            <dt>Code Set:</dt>
                                            <dd>
                                                <select id="simpSR_CodeSet_{{id}}" class="InputDD" /></dd>
                                        </dl>

I simply want to retrieve the text of the item currently selected in the list, not all available items. This is necessary for displaying or hiding fields based on the displayed text.

Answer №1

Check out this solution:

$("#dropDownId").children("option").filter(":selected").text()

Answer №2

Thank you Aakash for your help. I managed to implement a small tweak based on your suggestion.

$(this).children("option").filter(":selected").text()

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

Using Javascript to dynamically add and remove elements on click

Whenever I click on a link, I am able to generate input, label, and text. However, I want to be able to delete these elements with the next click event on the same link: I've tried updating my code like this: var addAnswer = (function() { var la ...

What is the method to conceal a certain element in jQuery based on the value of another element?

I am dealing with the following HTML structure: <button id="hideToggle">show/hide</button> <form id="item"> <div>Item 1 <input name="item1" type="number"/></div> <div>Item 2 <input name="item2" type="nu ...

Tips for accessing a file in AngularJS

Can AngularJS be used to read files? I am interested in placing the file within an HTML5 canvas for cropping purposes. I was considering implementing a directive. Below is the JavaScript code that I plan to include in my directive: function readURL(input ...

Navigating the grid layout in Material UI can be tricky to

I'm struggling to grasp the concept of the grid system in material UI. Within my grid container, I have two grid items that I want to be centered and occupy the entire width. The button element appears centered, but the typography element does not. A ...

JS - reloading the location after a function has been carried out with a short delay

Currently, I am using a JS / AJAX script to update information in my table. After the script finishes running, I want to reload the page. Unfortunately, when using my current code, the page reloads instantly. Is there a way to add a delay of 3 seconds befo ...

Minimize the entire project by compressing the .css, .js, and .html files

After recently incorporating Grunt into my workflow, I was thrilled with how it streamlined the process of minifying/concatenating .css files and minifying/uglify/concatenating .js files. With Grunt watch and express, I was able to automate compiling and ...

Is there any npm module available that can generate user-friendly unique identifiers?

Struggling to come across a user-friendly and easily readable unique ID generator for storing orders in my backend system. I have considered using the timestamp method, but it seems too lengthy based on my research. ...

Breaking down the text field into two distinct fields

I have successfully modified the code below to meet a new requirement. The current functionality involves splitting the Price field into Pounds and Pence based on the index of the . symbol. However, I now need to extend this functionality to split a Name ...

Best practice in AngularJS: Conceal/unveil fresh DOM elements or compile

Just starting out with AngularJS and looking to adjust button behavior on the fly. Coming from a JQuery background, I'm used to using element.attr('ng-click', 'controller.function()'). However, it seems that AngularJS requires co ...

A guide to disabling daily checkboxes and retrieving the chosen values using Angular.js

Within a single table, I have incorporated a dynamic drop-down list that spans over 7 days. Additionally, I have implemented a "+" button that allows for the creation of additional rows dynamically for each day. Each row within the table features a checkb ...

Error encountered while implementing onMutate function in React Query for Optimistic Updates

export const usePostApi = () => useMutation(['key'], (data: FormData) => api.postFilesImages({ requestBody: data })); Query Definition const { mutateAsync } = usePostApi(); const {data} = await mutateAsync(formData, { onMutate: ...

Is there a way to deactivate the minutes input feature in the Angular UI Timepicker?

I am using a plugin that displays the time in hours and minutes. However, I only need to show the hours. Is there a way to hide the minutes block? This is my HTML code: <uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="1" minute-step ...

Developing a quiz using jQuery to load and save quiz options

code: http://jsfiddle.net/HB8h9/7/ <div id="tab-2" class="tab-content"> <label for="tfq" title="Enter a true or false question"> Add a Multiple Choice Question </label> <br /> <textarea name ...

Node.js Sequelize QueryExplore the power of Sequelize in Node.js

I'm looking to filter the "incomers" based on age, but all I have in the table is their date of birth. I want to find people within a specific age range, how can I accomplish this? router.post('/', function (req, res, next) { let parame ...

Perform DOM manipulation prior to triggering the AJAX event to prevent CSRF Error

Currently, I am faced with a challenge while working on Django. My goal is to implement a chained AJAX call - meaning that once one call returns, it triggers additional AJAX calls. Despite thorough research and referencing the suggested methods in the Djan ...

Tips for seamlessly transitioning the background of Google Maps into view as you scroll down the page

I have a unique background with a Google Map. It loads perfectly in the right place when I open the page, but as I scroll down, it disappears from view. Is there a way to keep the Google map constantly in the background, even when scrolling? This is my cu ...

Error: Conversion of "2018-01-01-12:12:12:123456" to a date is not possible for the 'DatePipe' filter

<td>{{suite.testSuiteAttributes && suite.testSuiteAttributes.modifiedTimestamp | date: 'yyyy-MM-dd' }} </td> I am trying to display the date in the "05-Feb-2018 11:00:00 PM CST" CST format, but I keep getting an ...

Tips for showcasing images retrieved from a REST API on the frontend, with the condition that only one image should be displayed using multer

I am experiencing an issue where only the image logo is being displayed in my frontend, rather than the entire image that I uploaded in string format on my backend. Can someone please help me troubleshoot this error and identify what may be wrong with my c ...

Load components dynamically and place them in a flexible position based on the context

UPDATE (After gaining a better understanding of the issue): I'm trying to display a component based on where the user clicks (specifically, which table row). Using ng2-smart-table, I've encountered an issue where there isn't a suitable sele ...

What causes the failure of this select menu in the latest combination of jQuery and JQM?

I am looking to enhance this code, but I have noticed that it does not limit the selection (by count) in the newer versions of jQuery and JQM. Check out this example which demonstrates that it works with jQuery 1.8.3 and JQM 1.2.0. Here is the jQuery cod ...