javascript to add option element to a select list, but with custom data attributes

Question

I'm trying to insert an additional select option to a list, but with specific data elements:

function myFunction() {
    var x = document.getElementById("mySelectList");
    var option = document.createElement('option', {
        "data-img-src": "https://blah",
        "data-img-alt": "https://blah"
    });
    option.text = "New Image";
    x.add(option);
}

This is intended to allow image-picker to detect the additional item and hopefully display it.

But the additional attributes are ignored. I'd really appreciate some help please, as I'm going out of my mind. Thanks

Krikroff · Accepted Answer · 2018-06-27 20:49:14Z

1

I would add that x.add is not valid, use appendChild instead : Node.appendChild

To sum up :

function myFunction() {
  var x = document.getElementById("mySelectList");
  var option = document.createElement('option');
  option.text = "New Image";
  option.setAttribute("data-img-src", "https://blah");
  option.setAttribute("data-img-alt", "https://blah");
  x.appendChild(option);
}

answered Jun 27, 2018 at 20:49

Krikroff

112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Harris-Deans Over a year ago

Yes - quite right.. thanks. its now working using this above code.. thanks very much for the help. Is it JQuery thats meaning that the x.appendChild(option) works in my real code, but the x.add(option) worked on a more basic example?

Taki · Accepted Answer · 2018-06-27 20:36:33Z

0

use setAttribute :

function myFunction() {
  var x = document.getElementById("mySelectList");
  var option = document.createElement('option');
  option.text = "New Image";
  option.setAttribute("data-img-src", "https://blah");
  option.setAttribute("data-img-alt", "https://blah");
  x.add(option);
}

myFunction()

<select id="mySelectList">

</select>

answered Jun 27, 2018 at 20:36

Taki

17.7k5 gold badges28 silver badges48 bronze badges

1 Comment

James Harris-Deans Over a year ago

Thanks very much. That's perfect.

Patrick Evans · Accepted Answer · 2018-06-27 20:47:21Z

The second argument you are using isn't valid for createElement()

options
An optional ElementCreationOptions object containing a single property named is, whose value is the tag name for a custom element previously defined using customElements.define(). See Web component example for more details.

Use setAttribute() or dataset["name"] to set data-* attributes

option.setAttribute("data-img-src", "https://blah");
option.setAttribute("data-img-alt", "https://blah");

//note dataset uses camelcase for dashed names
option.dataset["imgSrc"] = "https://blah";
option.dataset["imgAlt"] = "https://blah";

function myFunction() {
  var x = document.getElementById("mySelectList");
  var option = document.createElement('option');
  option.text = "New Image";
  option.setAttribute("data-img-src","https://blah");
  option.setAttribute("data-img-alt","https://blah");
  x.add(option);
  
  //just for displaying what the attributes were set to
  document.body.insertAdjacentHTML('beforeend',`<br>src: ${option.dataset.imgSrc}`);
}

document.querySelector('button').addEventListener('click',myFunction);

<select id="mySelectList"></select>
<button>Add</button>

Collectives™ on Stack Overflow

javascript to add option element to a select list, but with custom data attributes

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related