0

I'm trying to add an extra attribute to new Option() so that I can pass the value to href. 

    for(var i =0; i < response.data.length; i++)
    {
      pages[i] = new Option(response.data[i].name,response.data[i].access_token);
    }

right now the option looks like this

<option value ="access_token">name</option>

the final result should look more like this

<option value ="access_token" data-id="id">name</option>

then with a second script I collect the values and pass to an href

var access_token = e.options[e.selectedIndex].value;    
var link = "next_page.php?access_token=" + access_token;
var element = document.createElement("a");
element.setAttribute("href", link);

right now href looks like this

<a href="next_page.php?access_token=access_token"></a>

The href end result should grab new attribute

<a href="next_page.php?access_token=access_token&data_attribute=data"></a>
Balloon Fight
  • 661
  • 8
  • 16
  • you can read and write custom data attributes on an HTML element using the [`dataset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) property – Hamms Sep 12 '17 at 20:03
  • Unless I'm reading it wrong, once you have your extra attribute (whatever it is) just add it to the link: `var link = "next_page.php?access_token=" + access_token + "&" + extraAttribute;` – freginold Sep 12 '17 at 20:04
  • @freginold: I need to generate the attribute dynamically in the for loop – Balloon Fight Sep 12 '17 at 20:07
  • @Hamms : looks good but how to attach in the for loop? – Balloon Fight Sep 12 '17 at 20:09
  • `pages[i].dataset.id = "id"`. As far as the question of generating the attribute dynamically, that's a separate question and one that will require quite a few more details from you on what you want this attribute to be. Something like https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript might be what you're looking for – Hamms Sep 12 '17 at 20:15
  • @Hamms : the attribute is generated by the response from the function so I'm going to try this out right now. – Balloon Fight Sep 12 '17 at 20:36

1 Answers1

2

(pages[i] = new Option('_name_','_value_')).dataset['id'] = '_id_';

This will work in FF, but unfortunately doesn't allow chainning. Hope this helps.

Reflective
  • 3,854
  • 1
  • 13
  • 25
  • Thanks. This works. What do you mean by chaining? Excuse my ignorance. – Balloon Fight Sep 12 '17 at 20:42
  • And since it was part of the question to attach to href should I create the variable like this : `var dataset = e.options[e.selectedIndex].dataset; ` ? – Balloon Fight Sep 12 '17 at 20:43
  • channing means you can not repeat it for more attributes in the same row because Option object is not returned after `=` operator, so you can not do another `.dataset` as a chain. You can add it on a new line as `pages[i].dataset['attrib2'] = '_attrib2_value_'`. `dataset` which is a DOMStringMap object does not allow adding multiple data attribs at once, per instance using `pages[i].dataset.push({attr1: val1, attr2: val2})`. – Reflective Sep 12 '17 at 20:53
  • ...surfed many SO pages that gave advice that proved to be unhelpful. The posts were using `.data(...)` and `.attr(...)` -- but those techniques kept yielding ".data/.attr is not a function". This was the only one that properly added my `data-` attribute after `new Option()`. – mickmackusa Jun 24 '19 at 00:56