Question

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

以下是代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

问题是我无法获得自定义属性的值，即＆＃34;数据标识＆＃34; 。我试图将它放在alert（）方法中以查看值，它说＆＃34; null＆＃34; 。即使我删除了if else语句，它仍然返回null。我不知道代码有什么问题所以请帮助我。

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

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

Answer 1

您不希望选择数据属性，您想要所选的选项数据属性：

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

Answer 2

'this'在这里指的是select而不是选项。您可能想尝试这样做：

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更改为！=＆＃39;＆＃39;所以它显示＆＃34;名称＆＃34;当数据指定为空白时。

<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（）参考

如何使用JAVASCRIPT

7 个答案: