如何使用onchange获得多个表行显示/消失

How to get multiple table rows to appear/dissapear using onchange

本文关键字：显示 消失 何使用 onchange      更新时间：2023-09-26

我有一个选项在我的表单，如果用户回答是，然后显示一个div区域。

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

所以我想知道如何使用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>

有什么建议吗?

谢谢

你真的不希望有多个具有相同id的元素(id应该是唯一的)。你可以用class代替。我的专业知识是使用jquery，这将使这很容易，但有实现"getelementbyclass"行为的函数可以使用

不要使用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;
}

    <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>
相关文章：