Trying to access the label attribute of a select option in Vue.js?

Looking to retrieve the name attribute of a selected option in Vuejs. After experimenting with the value attribute, I found that it worked successfully. Below is the code I used:

Tested code:

<select id="countryselect" name="country" @change="onChange()">
  <option value="1" name="0">Afghanistan</option>
  <option value="2" name="0">Albania</option>
  <option value="3" name="0">Algeria</option>
  <option value="4" name="1">Malaysia</option>
  <option value="5" name="0">Maldives</option>
</select>

var app = new Vue({
  el: '#app',
  methods: {
    onChange: function() {
      // This works perfectly
      var b = event.target.value;
      // This does not work correctly
      var c = event.target.name;
    }
  },
});

If you have any insights on how to achieve this, please share. Thank you.

Answer №1

event.target.name retrieves the name attribute of the select element, not the selected option. To access the name attribute of the selected option, you can utilize the getAttribute() method like so:

var app = new Vue({
  el: '#app',
  methods: {
    onChange: function() {
      var options = event.target.options
      if (options.selectedIndex > -1) {
        var name = options[options.selectedIndex].getAttribute('name');
        console.log(name)
      }
    }
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <select id="countryselect" name="country" @change="onChange()">
    <option value="0">---Select---</option>
    <option value="1" name="0">Afghanistan</option>
    <option value="2" name="0">Albania</option>
    <option value="3" name="0">Algeria</option>
    <option value="4" name="1">Malaysia</option>
    <option value="5" name="0">Maldives</option>
  </select>
</div>

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

Utilizing React Native to Query, Filter, and Save a Single Document Field Value from Firestore Database into a Variable/Constant

My current task involves setting up a Firebase Firestore Database in order to filter it based on a specific field value within a document. The collection I am working with is named "PRD" and consists of thousands of documents, each sharing the same set of ...

Production environment experiencing issues with Stripe functionality due to element remaining mounted

When making a payment in development mode, everything goes smoothly. However, when I switch to production, I encounter the following error message: v3:1 Uncaught (in promise) IntegrationError: We could not retrieve data from the specified Element. Please e ...

Choose components identified by a dot

If I have a simple script that displays an element based on the option selected, how can I handle periods in the values? For instance: <select id="my-selector"> <option value="cat.meow">Cat</option> <option value="dog.bark"> ...

Verify if the date chosen falls on the current date or any upcoming date within vuejs validation

I am working on a Vue.js component that includes a form where the user needs to select a start date from a date picker. The user should only be able to choose a date that is either today's date or a future date. <div class="w-1/2 mr-2"&g ...

Troubleshooting Problem in Coursera's AngularJS Week 3 Exercise 4

Here's the issue I'm facing: After launching the index page with 'gulp watch', there's nothing visible on the screen. An error appears: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.12/$injector/modulerr?p ...

Tips for incorporating a hashbang into a JavaScript file that is executable without compromising browser compatibility

Is it possible to run code like this in both Node.js and the browser? #! /usr/local/bin/node console.log("Hello world") I have a script that I currently run locally in Node.js, but now I want to also execute it in the browser without having to modify it ...

Utilizing JSON instead of GeoJSON with AJAX in Leaflet

I am in search of a method to utilize JSON instead of GeoJSON with leaflet, making use of AJAX. The use of JSON and AJAX is imperative for this task. I have successfully called a JSON file using AJAX. However, I am now unsure about how to effectively util ...

The ajax keypress event is malfunctioning and the ActionResult parameter is failing to capture any data

I am facing an issue where I want to update the value of a textbox using AJAX on keypress event, but the controller is not receiving any value to perform the calculation (it's receiving null). <script> $('#TotDiscnt').keypress(fu ...

Removing nested divs using JavaScript

My website has a nested div structure which contains multiple child divs. Here is an example of the div structure: <div id="outside-one"> <div class="inside" id="1"></div> <div class="inside" id="2"></div> <div ...

Steps for deactivating jQuery slider control until radio button is selected:

Looking to deactivate the operation of jQuery UI sliders until a radio button is selected. Despite my efforts, I have been unsuccessful in achieving this task and could use some guidance. For reference, here is a link to the code: http://jsfiddle.net/nlem3 ...

Unable to decipher the mysterious map of nothingness

I am currently working on a GET method in Node.js. My goal is to fetch data using the GET request and then use the MAP function to gather all the names into an array. However, I encountered the following error: /root/server.js:21 ...

What is the best method for sending a JavaScript variable to the server and back again?

I'm currently working on a JavaScript project where I need to build a string. Let's say, for the sake of this example: var cereal = 'my awesome string'; There's also a button on my webpage: <button id="send" type="submit" nam ...

String ES6 syntax immediately after function

return pool.query`select * from mytable where id = ${value}` How can the code snippet above be rewritten in full JavaScript? I attempted to use: return pool.query(`select * from mytable where id = $(value)`) but it seems like there is a difference. Th ...

What is the best way to choose all cells that begin, include, or finish with a specific term using JQuery/CSS?

I have a table with some cells and I am looking to utilize JQuery to select specific cells. For example: <td>John Doe</td> <td>John Doe1</td> <td>1John Doe</td> I want to select cells that start with 1, include Doe, a ...

Choosing from a list in Angular

I'm trying to make a dropdown menu that shows options in the format "code-description", but only displays the "code" portion when an option is selected. For example, showing "A-Apple" in the dropdown, but displaying only "A" when chosen. I am able to ...

Storing dynamically loaded images through PHP, AJAX, JSON, and jQuery for faster retrieval

I will provide as much detail as I can here. The application I am currently developing allows administrators to create folders and upload photos into them. The display is similar to Pinterest, where all the photos are loaded in a collage on one screen. It ...

Breaking up and processing a given string in JavaScript: Splitting and token

When it comes to dealing with this specific JavaScript requirement, the challenge lies in working with a string such as: “ [ condition12 (BRAND) IN 'Beats by Dr. Dre & D\’Silva of type Band’ of type 'IDENTIFIER_STRING’ ] ...

When refreshed using AJAX, all dataTable pages merge into a single unified page

I followed the instructions on this page: How to update an HTML table content without refreshing the page? After implementing it, I encountered an issue where the Client-Side dataTable gets destroyed upon refreshing. When I say destroyed, all the data ...

Adjusting the size of Bootstrap alerts while ensuring the close icon remains correctly positioned

Below is the HTML code snippet I am working with: <div class="row mt-2"> <div class="col-lg-5"> <div id="alertmessages"></div> </div> <div class="col-lg-7"> <div class="btn-group-sm"> ...

Replace the image source with a list of images

I am looking to create a dynamic image list using either an array or an HTML list. When I hover over an image, it should change one by one with a fade or slide effect, and revert back to the default images when I hover out. Question 1: What type of list s ...