如何使用 onchange 让多个表行出现/消失

Question

我的表单中有一个选项，如果用户回答“是”，则会显示一个分区区域。

然而，我改变了我的布局等，因为我的表单处理统计数据，我想我会在某些部分使用一些表格。

所以我想知道如何使用 onchange 函数将三个表行附加到表中。

但是 getelementbyID 仅适用于一个元素，因此仅显示我的行之一。

这是我到目前为止所拥有的代码：

 <table>
      <tr>
      <th>
    <select name="dosage" id="dosage" style="display:block;" onchange="document.getElementById('dosagearea').style.display = this.options.selectedIndex ? 'block' : 'none'">
     </th>
     </tr>


    <?php
//this code generates input fields using codeigntier
                                echo '<tr id="dosagearea">', '<td>', form_label('Emitted µmGy','dosage_emitted'), '</td>', '<td>', form_input ('dosage_emitted', set_value('dosage_emitted')) ,'</td>', '</tr>';
                                echo '<tr id="dosagearea">', '<td>', form_label('Absorbed mGy2','dosage_absorbed'), '</td>', '<td>', form_input ('dosage_absorbed', set_value('dosage_absorbed')) ,'</td>', '</tr>';
                                echo '<tr id="dosagearea">', '<td>', form_label('Dosage Period (mins)','dosage_time'), '</td>', '<td>', form_input ('dosage_time', set_value('dosage_period')), '</td>', '</tr>';
                        ?>

    </table>

有什么建议吗？

谢谢

Answer 1

你真的不想有多个具有相同 id 的元素（id 应该是唯一的）。你可以使用类来代替。我的专业知识是 jquery，这将使这变得很简单，但是您可以使用一些实现“getelementbyclass”行为的函数

Answer 2

不要使用 getElementById，而使用 getElementByClassName，因为多个元素可以具有相同的类名。为了确保它在 IE 中正常工作，请添加以下内容：

document.getElementsByClassName = function(class_name)
{
    var all = this.getElementsByTagName('*');
    var matchArray = new Array();
    var re = new RegExp("(?:^|\\s)" + class_name + "(?:\\s|$)");
    for (var i = 0, l = all.length; i < l; i++)
    {
        if (re.test(all[i].className))
            matchArray.push(all[i]);
    }
    return matchArray;
}

Answer 3

    <select name="dosage" id="dosage" style="display:block;" onchange="toggleShowHide(this.options.selectedIndex, ['id1', 'id2', 'id3']);">

<script type="text/javascript">
function toggleShowHide(idx, arrIDs) {
    var display = idx ? 'block' : 'none';
    for(var x=0; x<arrIDs.length; x++)
        document.getElementById(arrIDs[x]).style.display = display;
}
</script>