Question

我是新手，我正在练习创建一个调查表，用户可以添加更多问题。因此，我有一个下拉菜单，有两个选择：复选框和单选按钮，但是当我单击复选框时，隐藏的div不会出现。我也可以使用.attr作为选择吗？

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

添加问题

  <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

以下脚本应更改：

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

到

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

函数getElementById通过其id获取元素，因此您应将id传递给该函数

我也可以使用.attr进行选择吗？

是的，您可以将属性设置为<option>

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

并将其放入onchange句柄中：

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

Answer 2

执行此操作的另一种方法是使用您在<select>标记上设置的侦听器，并让它调用您已初始化的函数，而不是在已经具有{{ 1}}事件附带。

onchange

还要确保在初始化function selectorchecker(){ var hiddenDiv = document.getElementById("chkbox_choice"); hiddenDiv.style.display = (this.value == "") ? "none":"block"; }标记之前调用脚本，以便html知道该函数存在

JSFiddle

如何修复下拉菜单以使隐藏的div之一出现并追加

2 个答案: