如何根据语义 UI 下拉列表中的选定项目更改页面上的文本？

Question

当我从 Semantic UI 的下拉菜单中选择一个项目时，我在尝试自动更改页面上两个 div 标签中的文本时遇到了麻烦。我不确定我哪里出错了。我制作了一个 javascript 函数，它应该针对下拉列表并从那里检索值。

这是 HTML 代码

<h2 class="sTypeText">Undefined</h2>
<span class="annotation">
  You've selected <b class="sTypeText">undefined</b> mode. You can continually edit this mode and its details.
</span>

<div id="dropdown" class="ui fluid selection dropdown" onchange="changeSelect">
  <div class="text">Choose Type</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item" data-value="A">Assessment</div>
    <div class="item" data-value="G">Group</div>
    <div class="item" data-value="S">Solo</div>
  </div>
</div>

这是 Javascript 代码：

function changeSelect() {
    if (document.getElementById("dropdown").data-value == "A") {
        document.getElementByClassName("sTypeText").innerHTML = "Assessment";
    } else if (document.getElementById("dropdown").data-value == "G") {
        document.getElementByClassName("sTypeText").innerHTML = "Group"; 
    } else if (document.getElementById("dropdown").data-value == "S") {
        document.getElementByClassName("sTypeText").innerHTML = "Solo";
    }
}

Answer 1

要获取数据属性值，您可以尝试使用{DOMElement}.getAttribute('data-{name of attribute}') 或使用dataset 属性：{DOMElement}.dataset.{name of attribute}

尝试将代码更改为此以从数据属性“value”中获取值：

function changeSelect() {
    if (document.getElementByClassName("dropdown").dataset.value == "A") {
        document.getElementByClassName("sTypeText").innerHTML = "Assessment";
    } else if (document.getElementById("dropdown").dataset.value == "G") {
        document.getElementByClassName("sTypeText").innerHTML = "Group"; 
    } else if (document.getElementById("dropdown").dataset.value == "S") {
        document.getElementByClassName("sTypeText").innerHTML = "Solo";
    }
}