Avatar of impressionexpress
impressionexpress

asked on 

trying to add option with data attribute using jquery

This is what I have so far but the data attributes are not added. what am I doing wrong
$('select[name="slc_pc"]')
  .append($('<option />')  // Create new <option> element
    .val('Hello')            // Set value as "Hello"
    .text('Hello')           // Set textContent as "Hello"
    .prop('selected', true)  // Mark it selected
    .data({                  // Set multiple data-* attributes
      token: 'abc'
    })
  );

Open in new window

jQuery

Avatar of undefined
Last Comment
Chris Stanyon
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Hey there,

Are you sure they're not being added. They won't show up in your inspector or the console, so you won't be able to 'see' if they've been added. You'll need to examing the data property in code to check them. Quick way is to select the <option> in your Inspector and then type $($0).data() into the inspectors command line - that will output the data attributes on your element,
Avatar of impressionexpress
impressionexpress

ASKER

I do see it showing up when inspecting element, but the data attribute is not there. also when I get the value of the data-token its coming back undefined ?
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

I doubt you see it showing up when you inspect - that's just not how dynamic data elements work.

You say it's coming back as undefined - how exactly are you trying to retrieve the value?

You can see a working demo here: https://jsfiddle.net/ChrisStanyon/v0dfzqL7/Just click the button and you'll see the data
Avatar of impressionexpress

ASKER

I see the new option that was added but without the data-token. I can also check if undefined on line 6, but im more curious as to why its return undefined
		var report_id = $("#report_list").find(":selected").val();
		var token = $("#report_list").find(':selected').attr('data-token');
		
		var fetch_str = '?token=' + token;
		
		if(token == ''){
			fetch_str = '?id=' + report_id;
		}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
jQuery
jQuery

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

19K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo