Question

我正在尝试向列表中插入一个附加选择选项，但要包含特定的数据元素：

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

这旨在允许图像选择器检测到其他项目并希望将其显示。

但是其他属性将被忽略。我真的很想谢谢您的帮助，因为我会不知所措。谢谢

Answer 1

我要补充一点，x.add无效，请改用appendChild：Node.appendChild

总结：

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

Answer 2

使用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>

Answer 3

您使用的第二个参数对createElement()无效

选项
一个可选的ElementCreationOptions对象，其中包含一个名为is的属性，其值是自定义元素的标记名以前使用customElements.define（）定义。请参阅Web组件有关更多详细信息的示例。

使用setAttribute()或dataset["name"]设置data- *属性

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>

javascript将选项元素添加到选择列表，但具有自定义数据属性

3 个答案: