PURE JS 获取选中的选项数据属性值返回 Null

Question

我有这个html：

<select onchange="check_status(this);" name="status[171]">    
    <option selected="true" value="open" data="04f2cf35e4d7a1c0158459fd0450a605">open</option>    
    <option value="in_process" data="04f2cf35e4d7a1c0158459fd0450a605">pending</option>    
    <option value="finished" data="04f2cf35e4d7a1c0158459fd0450a605">finished</option>    
    <option value="canceled" data="04f2cf35e4d7a1c0158459fd0450a605">canceled</option>    
</select>    

和js

function check_status(obj){    
    var uid = obj.getAttribute('data');
    alert(uid);
}

但它总是提醒空值而不是数据值问题在哪里？ 谢谢

Answer 1

问题是您将选择元素而不是选择的选项元素作为函数参数。 而且它没有data属性。 您必须像这样获取选项属性：

 function check_status(obj) { var uid = obj.options[obj.selectedIndex].getAttribute('data-uid'); alert(uid); }

 <select onchange="check_status(this);" name="status[171]"> <option selected="true" value="open" data-uid="01f2cf35e4d7a1c0158459fd0450a601">open</option> <option value="in_process" data-uid="02f2cf35e4d7a1c0158459fd0450a602">pending</option> <option value="finished" data-uid="03f2cf35e4d7a1c0158459fd0450a603">finished</option> <option value="canceled" data-uid="04f2cf35e4d7a1c0158459fd0450a604">canceled</option> </select>

请注意，我将属性名称更改为data-uid以使其根据 HTML5 规范有效。

Answer 2

您正在尝试获取选择数据属性，而不是选项。

另外，我可以看到您所有的data属性都是相同的。 然后您可以将其从选项移动到选择自身： <select onchange="check_status(this);" name="status[171]" data="04f2cf35e4d7a1c0158459fd0450a605" > <select onchange="check_status(this);" name="status[171]" data="04f2cf35e4d7a1c0158459fd0450a605" >并使用未经修改的从您的问题中截取的代码。

 function check_status(obj) { var uid = obj.options[obj.selectedIndex].getAttribute('data'); alert(uid) }

 <select onchange="check_status(this);" name="status[171]"> <option selected="true" value="open" data="open04f2cf35e4d7a1c0158459fd0450a605">open</option> <option value="in_process" data="pending104f2cf35e4d7a1c0158459fd0450a605">pending</option> <option value="finished" data="finished04f2cf35e4d7a1c0158459fd0450a605">finished</option> <option value="canceled" data="canceled04f2cf35e4d7a1c0158459fd0450a605">canceled</option> </select>

Answer 3

您可以使用“数据”属性定义自定义属性。 在您的代码中，没有 custome 属性，我确定您希望它是一个 ID。 确切的格式是"data-*" ，其中"*"替换为所需的自定义属性名称，然后设置为所需的字符串值。 因此，在您的代码中，理想情况下应该是：

<select onchange="check_status(this);" name="status[171]">
  <option selected="true" value="open" data-id="open04f2cf35e4d7a1c0158459fd0450a605">open</option>
  <option value="in_process" data-id="pending104f2cf35e4d7a1c0158459fd0450a605">pending</option>
  <option value="finished"   data-id="finished04f2cf35e4d7a1c0158459fd0450a605">finished</option>
  <option value="canceled"   data-id="canceled04f2cf35e4d7a1c0158459fd0450a605">canceled</option>
</select>

假设您希望自定义属性为“id”。

有两种方法可以使用纯 JavaScript 检索“data”属性的值：除了老式的 get/setAttribute()，还可以使用元素的“dataset”属性进行访问

使用 DOM 的 getAttribute() 属性

function check_status(obj) {
      var myoption = obj.options[obj.selectedIndex];
      var uid = myoption.getAttribute('data');
      alert(uid);
      // setting and removing the data-id attribute
      myoption.setAttribute("data-id", "foo") //changes "data-id" to "foo"
      myoption.removeAttribute("data-id") //removes "data-id" attribute entirely
 }

使用 JavaScript 的数据集属性

function check_status(obj) {
      var myoption = obj.options[obj.selectedIndex];
      var uid = myoption.dataset.id;
      alert(uid);
      var statusId = myoption.dataset["id"] 
      alert(statusId);
}

Answer 4

function check_status(obj){    
    var uid = obj.options[obj.selectedIndex].getAttribute('data');
    alert(uid);
}

Answer 5

根据文档，最简单的方法是在获取元素后使用 automagic dataset 属性。

在 JavaScript 中读取这些属性的值也非常简单。 您可以使用带有完整 HTML 名称的 getAttribute() 来读取它们，但标准定义了一种更简单的方法：您可以通过数据集属性读取 DOMStringMap。

<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
…
</article>

---

const article = document.querySelector('#electric-cars');
// The following would also work:
// const article = document.getElementById("electric-cars")

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

注意从数据集读取时从data-index-number到indexNumber的转换。