如何修复下拉列表，使其中一个隐藏的div出现并追加

Question

I'm a newbie and I 'm practicing creating a questionnaire that the user can add more question. So I have a dropdown with two choices: checkbox and radio button but when I click the checkbox the hidden div does not appear. Also can I use .attr for the choices?

JSFiddle

<div class="container">
     Question: 
     <br>

     <textarea rows = "5" cols = "50" name = "description" placeholder="Enter a question">
     </textarea>
     <br>

     <select name="choice" id="choice" onchange="selectorchecker()">
        <option value="">Select choices</option>
        <option value="checkbox">Checkbox</option>
        <option value="radiobtn">Radio Button</option>
     </select>
 </div>

Add Question

  <div style="display:none;" id="chkbox_choice">
     <table id="dataTable" width="350px" >
        <tr>
            <td><input type="checkbox" name="check"/></td>
            <td> <INPUT type="text" /> </td>
        </tr>
    </table>

    <input type="button" value="Add choices" onclick="addRow('dataTable')" />

    <input type="button" value="Delete choices" onclick="deleteRow('dataTable')" />
</div>


<div style="display:none;" id="rdbtn_choice">
  <table id="dataTable" width="350px" >
        <tr>
            <td><input type="radio" name="radio"/></td>
            <td> <INPUT type="text" /> </td>
        </tr>
    </table>

    <input type="button" value="Add choices" onclick="addRow('dataTable')" />

    <input type="button" value="Delete choices" onclick="deleteRow('dataTable')" />
</div>

Answer 1

The below script should be changed:

<select name="choice" id="choice" onchange="selectorchecker()">
...
var elem = document.getElementById("selectorchecker");

to

<select name="choice" id="choice">
...
var elem = document.getElementById("choice");

the function getElementById get the element by its id , so you should pass the id to that function

Also can I use .attr for the choices?

Yes, you can put the attr to <option>

<option value="checkbox" custom-field="custom-value">Checkbox</option>

And get it inside the onchange handle:

this.options[this.selectedIndex].getAttribute('custom-field')

Answer 2

Another way to do this would be to use the listener that you set on your <select> tag, and have it call the function you have already initialized rather than set a listener on an item that already has an onchange event attached to it.

function selectorchecker(){
    var hiddenDiv = document.getElementById("chkbox_choice");
    hiddenDiv.style.display = (this.value == "") ? "none":"block";
}

Also make sure the script is called before the <select> tag is initialized, so that the html knows the function exists

JSFiddle