如何获得自定义属性的价值 <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” 。 即使我删除了if else语句，它仍然返回null。 我不知道代码有什么问题所以请帮助我。

我试图找到解决方案，但我找到的只是jQuery。 我不擅长jQuery所以我想要一个纯粹的JAVASCIPT解决方案。

PS如果您的解决方案是将其存储在value属性中，那么这不是我正在寻找的。

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

在获得选项之前，您必须先选择所选选项

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

Answer 6

这应该没问题。 将！= 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 7

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

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

https://api.jquery.com/data/ - Jquery data（）参考