JavaScript onchange函数不起作用

Question

This javascript is supposed to change the drop down's HTML as well as change the content of the corresponding div's. The first click changes the dropdown html but you cant change it back as well as you lose the little arrow on the dropdown that let users know its a dropdown. The populate checkboxes doesnt populate the div because i dont know how to make javascript let me put/remove check boxes

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

the populateCheckBoxes is supposed to have these check boxes when the tables radio button is checked, and when the unpopulaeCheckBoxes radio button is checked the div will be empty. I dont have this code in anything yet because i believe its supposed to be in the javascript but pasting that in obviously doesnt work

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

This html holds the drop down that is supposed to change and the 2 divs that are supposed to change

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

here is the working code, its pretty plain, but works the same way, http://codepen.io/MarkBond/pen/JdOZaw?editors=101 . BTW this is done with bootstrap

Answer 1

Re-read this line:

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

That's some pretty pointless logic. The ID of an element that you find with the ID populateSelection is always going to be populateSelection .

You should be using value attributes, and proper event handling.

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> 

Some reading material:

• EventTarget.addEventListener()

Answer 2

Change your function to this

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

Covering your whole Question, I think you want like this:

Updated the whole Answer:

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>

Removed content inside ul and dynamically adding it:

<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