从 Javascript 中的 3 类中访问内容值

Question

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

所以我得到了我需要的所有东西的 class 名称。

下拉框中显示的所选值为：

<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-chosen 内容值。我尝试这样做，但它在 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

它应该适用于

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

但是你为什么要让自己变得如此困难？例如，您为什么不使用单选按钮？你为什么不使用 id？

Answer 2

编辑替换

"var y = document.get..."

和

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

============================================= ============================ 按照 Sylvia 的建议，尝试像这样使用单选按钮：

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>

Answer 3

您在错误的上下文中使用了 getElementsByClassName。此函数仅 returns 所有具有任意个指定 class 名称的元素。

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

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

从 Javascript 中的 3 类中访问内容值

Accessing the content value from within 3 classes in Javascript

html

javascript

class

subclass

从 Javascript 中的 3 类 中访问内容值

Accessing the content value from within 3 classes in Javascript

html

javascript

class

subclass

从 Javascript 中的 3 类中访问内容值