JavaScript onchange 函数不起作用

Question

此 javascript 应该更改下拉列表的 HTML 以及更改相应 div 的内容。第一次单击会更改下拉菜单 html，但您无法将其改回原样，因为您会丢失下拉菜单上的小箭头，让用户知道它是一个下拉菜单。填充复选框不会填充 div 因为我不知道如何让 javascript 让我 put/remove 复选框

JAVASCRIPT:

    function changeSelection() {
        var x = document.getElementById("populateSelection").id;

        if (x == "selectionViews") {
            document.getElementById("dropdownMenuSelect").innerHTML = "Views";
            document.getElementById("populateCheckBoxes").innerHTML = "";
        } else {
            document.getElementById("dropdownMenuSelect").innerHTML = "Tables";
            document.getElementById("unpopulateCheckBoxes").innerHTML = "";
        }
    }

当表格单选按钮被选中时，populateCheckBoxes 应该有这些复选框，而当 unpopulaeCheckBoxes 单选按钮被选中时，div 将为空。我还没有任何此代码，因为我相信它应该在 javascript 中，但粘贴它显然不起作用

                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="selectionCondition" checked/>50 million
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="selectionDistribution"/>100 million
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="selectionProgram"/>Status Quo
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="selectionTreatment"/>Do Nothing
                            </label>
                        </div>

HTML:

这个 html 包含应该更改的下拉列表和应该更改的 2 divs

                    <form role="form">
                        <div class="row">
                            <div class="radio col-xs-2" id="populateSelection"  onchange="changeSelection()">
                                <label>
                                    <input type="radio" name="optradio" id="selectionTables" />Use Tables
                                </label>&nbsp;&nbsp;
                                <label>
                                    <input type="radio" name="optradio" id="selectionViews" />Use Views
                                </label>
                            </div>
                            <div class="dropdown col-xs-10">
                                <!--DROPDOWN BUTTON-->
                                <button class="btn btn-default dropdown-toggle btn-xs btn-orange" type="button" id="dropdownMenuSelect" data-toggle="dropdown" aria-expanded="true" style="margin-top:10px">
                                    Views
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuSelect">
                                    <!--DROPDOWN MENU-->
                                    <li role="presentation"><a role="menuitem" tabindex="-1" class="link-no-jump" href="#graphOneChart">Chart</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" class="link-no-jump" href="#graphOneData">Data</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="row" id="populateCheckBoxes"></div>
                        <div class="row" id="unpopulateCheckBoxes"></div>
                    </form>

这是工作代码，它非常简单，但工作方式相同，http://codepen.io/MarkBond/pen/JdOZaw?editors=101。顺便说一句，这是用 bootstrap

完成的

Answer 1

重新阅读这一行：

var x = document.getElementById("populateSelection").id;

这是一些毫无意义的逻辑。您找到的 ID 为 populateSelection 的元素的 ID 始终为 populateSelection.

您应该使用 value 属性和适当的事件处理。

DEMO

function changeSelection(e) {
  var x = e.target.value;
  if (x == "selectionViews") {
    document.getElementById("dropdownMenuSelect").innerHTML = "Views";
    document.getElementById("populateCheckBoxes").innerHTML = "";
  } else {
    document.getElementById("dropdownMenuSelect").innerHTML = "Tables";
    document.getElementById("unpopulateCheckBoxes").innerHTML = "";
  }
}

document.getElementById('populateSelection').addEventListener('change', changeSelection);

<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<form role="form">
  <div class="row">
    <div class="radio col-xs-2" id="populateSelection">
      <label>
        <input type="radio" name="optradio" value="selectionTables" />Use Tables
      </label>&nbsp;&nbsp;
      <label>
        <input type="radio" name="optradio" value="selectionViews" />Use Views
      </label>
    </div>
    <div class="dropdown col-xs-10">
      <!--DROPDOWN BUTTON-->
      <button class="btn btn-default dropdown-toggle btn-xs btn-orange" type="button" id="dropdownMenuSelect" data-toggle="dropdown" aria-expanded="true" style="margin-top:10px">
        Views
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuSelect">
        <!--DROPDOWN MENU-->
        <li role="presentation"><a role="menuitem" tabindex="-1" class="link-no-jump" href="#graphOneChart">Chart</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" class="link-no-jump" href="#graphOneData">Data</a></li>
      </ul>
    </div>
  </div>
  <div class="row" id="populateCheckBoxes"></div>
  <div class="row" id="unpopulateCheckBoxes"></div>
</form>

一些阅读material:

EventTarget.addEventListener()

Answer 2

将你的函数改成这个

function changeSelection() {

    if (document.getElementById("selectionViews").checked) {
        document.getElementById("dropdownMenuSelect").innerHTML = "Views";
        document.getElementById("populateCheckBoxes").innerHTML = "";
    } else {
        document.getElementById("dropdownMenuSelect").innerHTML = "Tables";
        document.getElementById("unpopulateCheckBoxes").innerHTML = "";
    }
}

Answer 3

涵盖你的整个问题，我想你想要这样：

更新了整个答案：

HTML

<div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()">
      <label>
        <input type="radio" name="optradio" id="selectionTables" />Use Tables
      </label>&nbsp;&nbsp;
      <label>
        <input type="radio" name="optradio" id="selectionViews" />Use Views
      </label>
    </div>

删除了 ul 中的内容并动态添加了它：

<div class="dropdown col-xs-10">
      <!--DROPDOWN BUTTON-->
      <button class="btn btn-default dropdown-toggle btn-xs btn-orange" type="button" id="dropdownMenuSelect" data-toggle="dropdown" aria-expanded="true" style="margin-top:10px">
        Views
        <span class="caret"></span>
      </button>
      <ul id="dropdown-menu" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuSelect"></ul>
    </div>

JS/JQuery

function changeSelection() {

      if (document.getElementById("selectionTables").checked) {
        var x = document.getElementById("dropdownMenuSelect");
        var text = "Tables ";
        text += "<span class='caret'>";
        text += "</span>";
        x.innerHTML = text;
        document.getElementById("populateCheckBoxes").innerHTML = "";
        var y = document.getElementById("dropdown-menu");
        var text2 = "<li role='presentation'><a role='menuitem' tabindex='-1' class='link-no-jump' href='#graphOneChart'>";
        text2 += "Chart 1";
        text2 += "</a></li";
        text2 += "<li role='presentation'><a role='menuitem' tabindex='-1' class='link-no-jump' href='#graphOneChart'>";
        text2 += "Data 1";
        text2 += "</a></li";
        y.innerHTML = text2;
      } else {
        var x = document.getElementById("dropdownMenuSelect");
        var text = "Views ";
        text += "<span class='caret'>";
        text += "</span>";
        x.innerHTML = text;
        document.getElementById("unpopulateCheckBoxes").innerHTML = "";
        var y = document.getElementById("dropdown-menu");
        var text2 = "<li role='presentation'><a role='menuitem' tabindex='-1' class='link-no-jump' href='#graphOneChart'>";
        text2 += "Chart 2";
        text2 += "</a></li";
        text2 += "<li role='presentation'><a role='menuitem' tabindex='-1' class='link-no-jump' href='#graphOneChart'>";
        text2 += "Data 2";
        text2 += "</a></li";
        y.innerHTML = text2;
      }
    }

WORKING:CODEPEN

JavaScript onchange 函数不起作用

JavaScript onchange function doesn't work

html

javascript

jquery

onchange

twitter-bootstrap