asked on 1/28/2020

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'
    })
  );

Last Comment

1/28/2020

1/28/2020

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,

impressionexpress

1/28/2020

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 ?

Chris Stanyon

1/28/2020

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

impressionexpress

1/28/2020

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

Chris Stanyon

1/28/2020

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