在Javascript

Question

所以我有一个值为“No”和“Yes”的下拉框但是在选中时它不会显示属性。它只是空白。无论我选择什么，我都希望它显示我选择的内容，“是”或“否”。

所以我得到了我需要的所有类名。

对于下拉框中显示的选定值是：

<a class="select2-choice" tabindex="-1" onclick="return false;" href="javascript:void(0)">
    <span class="select2-chosen">No</span>
    <abbr class="select2-search-choice-close"></abbr>
    .....
</a>

下拉框html代码为：

<ul class="select2-results">
    <li class="select2-results-dept-0 select2-result select2-result-selectable">
          <div class="select2-result-label">No</div>
    </li>
    <li class="select2-results-dept-0 select2-result select2-result-selectable select2-highlighted">
          <div class="select2-result-label">Yes</div>
    </li>
</ul>

所以我想访问 select2-result-label 的值，并将它们设置为 select2-selected 内容值。我尝试过这样做，但它在FireBug中给我一个错误。

这是我到目前为止所做的......我做错了什么？

function testFunc() {
    var x = document.getElementsByClassName("select2-chosen");
    var y = document.getElementsByClassName("select2-results-dept-0 select2-result select2-result-selectable select2-highlighted")
            .getElementsByClassName("select2-result-label");
    x[0].innerHTML = y;
}

Answer 1

您在错误的上下文中使用getElementsByClassName。此函数仅返回具有任何指定类名的所有元素。

由于select2-highlighted仅分配给选定的元素，因此它是您应该关注的唯一类。进行这些更改应该会有所帮助：

function testFunc() {
  var x = document.getElementsByClassName("select2-chosen");
  var y = document.getElementsByClassName("select2-highlighted")[0].getElementsByClassName("select2-result-label");
  x[0].innerHTML = y[0].innerHTML;
}

Answer 2

它应该与

一起使用

x[0].innerHTML = y[0].innerHTML;

但是你为什么这样做对自己来说很难？例如，你为什么不使用单选按钮？你为什么不使用id？

Answer 3

修改 替换

"var y = document.get..."

带

"var y = document.getElementsByClassName("select2-results-dept-0 select2-result select2-result-selectable select2-highlighted")[0].children[0].innerHTML;"

=============================================== ========================== 尝试这样的东西来使用单选按钮，正如西尔维亚建议的那样：

window.setAnswer = function(dom) {
    var els = document.getElementsByTagName('input');
    for (el in els)
    {
        if (els[el].checked)
        {
            document.getElementsByTagName('h1')[0].innerHTML = els[el].nextSibling.nodeValue;               
            break;
        }
    }
}

<input type="radio" name="radio" onclick="setAnswer()">Yes</input><br>
<input type="radio" name="radio" onclick="setAnswer()">No</input><br>
<h1></h1>