如何使用 <option> JAVASCRIPT 获取标签内自定义属性的值

Question

我的下拉列表具有自定义属性，我想发生的是在标签标签中显示自定义属性值。

这是一个代码段：

function setDesignation(d){
  var designation = d.getAttribute("data-designation");
  if(designation != null){
  	document.getElementById('designation').innerHTML = designation;
  }else{
  	document.getElementById('designation').innerHTML = 'Name';
  }
  //alert(d.getAttribute("data-designation"));
}

<div>
    <select onchange="setDesignation(this)">
        <option value="1" data-designation="President">Mathew</option>
        <option value="2" data-designation="CEO">Mark</option>
        <option value="3" data-designation="Manager">Luke</option>
        <option value="4" data-designation="">John</option>
    </select>
</div>
<div>
    <label id="designation">Designation</label>
</div>

问题是我无法获得自定义属性的值，即"数据设计" 。我试图将其放入Alert((方法中以查看该值，并说" null" 。即使我删除了否则语句，它仍然返回null。我不知道代码怎么了，所以请帮助我。

我试图找到解决方案，但我发现的只是jQuery。我在jQuery方面不好，所以我想要一个纯Javascipt解决方案。

P.S。如果您的解决方案是将其存储在值属性中，那不是我要寻找的。

Answer 1

您不想要选择数据属性，您需要选项选项数据属性：

var designation = d.options[d.selectedIndex].getAttribute("data-designation");

Answer 2

'this'此处是指选择，而不是选项。您可能想尝试一下：

function setDesignation(d){
  var designation = d.selectedOptions[0].getAttribute('data-designation');
  if(designation != null){
    document.getElementById('designation').innerHTML = designation;
  }else{
    document.getElementById('designation').innerHTML = 'Name';
  }
}

希望这会有所帮助。

Answer 3

尝试此

 function setDesignation(d) {
            var designation = d.options[d.selectedIndex].getAttribute("data-designation");
            if (designation != "") {
                document.getElementById('designation').innerHTML = designation;
            } else {
                document.getElementById('designation').innerHTML = 'Name';
            }
        }

<div>
        <select onchange="setDesignation(this)">
            <option value="1" data-designation="President">Mathew</option>
            <option value="2" data-designation="CEO">Mark</option>
            <option value="3" data-designation="Manager">Luke</option>
            <option value="4" data-designation="">John</option>
        </select>
    </div>
    <div>
        <label id="designation">Designation</label>
    </div>

Answer 4

您必须通过选项是 this.options[this.selectedIndex]：

function setDesignation(d){
  var designation = d.getAttribute("data-designation");
  if(designation != null){
  	document.getElementById('designation').innerHTML = designation;
  }else{
  	document.getElementById('designation').innerHTML = 'Name';
  }
  //alert(d.getAttribute("data-designation"));
}

<div>
    <select onchange="setDesignation(this.options[this.selectedIndex])">
        <option value="1" data-designation="President">Mathew</option>
        <option value="2" data-designation="CEO">Mark</option>
        <option value="3" data-designation="Manager">Luke</option>
        <option value="4" data-designation="">John</option>
    </select>
</div>
<div>
    <label id="designation">Designation</label>
</div>

Answer 5

这应该没关系。将！= null更改为！='''因此，当数据设计为空白时，它显示"名称"。

<div>
    <select onchange="setDesignation(this)">
        <option value="1" data-designation="President">Mathew</option>
        <option value="2" data-designation="CEO">Mark</option>
        <option value="3" data-designation="Manager">Luke</option>
        <option value="4" data-designation="">John</option>
    </select>
</div>
<div>
    <label id="designation">Designation</label>
</div>
<script>
    function setDesignation(d){
        var designation = d.options[d.selectedIndex].getAttribute("data-designation");
        var label = document.getElementById('designation');
        if(designation != ''){
            label.innerHTML = designation;
        }else{
            label.innerHTML = 'Name';
        }
    }
</script>

Answer 6

您可以使用jQuery data()方法访问数据属性：

var designation = d.options[d.selectedIndex].data("designation");

https://api.jquery.com/data/- jquery data((参考

Answer 7

您必须先选择选定的选项，然后再获得选项

function setDesignation(d){
    var selectedDesignation = d.options[d.selectedIndex];
    console.log(selectedDesignation);
    var designation = selectedDesignation.getAttribute("data-designation");
    console.log(designation);
    if(designation != ""){
          document.getElementById('designation').innerHTML = designation;
    }else{
          document.getElementById('designation').innerHTML = 'Name';
    }
    //alert(d.getAttribute("data-designation"));
}