Question

这是html页面，其中包含JavaScript和HTML代码。

在此，如果我选择'1'，则会显示与id '1'匹配的表格。

问题是：

如果我将值更改为'2'，它是否仍会保留'1'的表值，然后为数字＆＃39; 2＆＃39;添加值到桌子？

<html>
    <head>
    <scripttype="text/javascript">
    window.onload   =functionmyfunction(val){
    vareSelect=document.getElementById('transfer_reason');
    varoptOtherReason=document.getElementById('otherdetail');
    varoptOtherReason1=document.getElementById('otherdetail1');
    varoptOtherReason2=document.getElementById('otherdetail2');
    varoptOtherReason3=document.getElementById('otherdetail3');
    varoptOtherReason4=document.getElementById('otherdetail4');
    varoptOtherReason5=document.getElementById('otherdetail5');
    eSelect.onchange=function()
    {   if(eSelect.selectedIndex===0)
        {
    optOtherReason.style.display='block';

    }

        elseif(eSelect.selectedIndex===1)
        {
    optOtherReason1.style.display='block';
    }

    elseif(eSelect.selectedIndex===2)
        {
    optOtherReason2.style.display='block';
    }
        elseif(eSelect.selectedIndex===3)
        {
    optOtherReason3.style.display='block';
    }

    elseif(eSelect.selectedIndex===4)
        {
    optOtherReason4.style.display='block';
    }
        elseif(eSelect.selectedIndex===5)
        {
    optOtherReason5.style.display='block';
    }
        else
        {
    optOtherReason.style.display='none';
    }
    }
    }
    </script>
    </head>
    <body>
    <selectid="transfer_reason"name="transfer_reason"onchange="myfunction(this.value);">
    <optionvalue="1">1</option>
    <optionvalue="2">2</option>
    <optionvalue="3">3</option>
    <optionvalue="4">4</option>
    <optionvalue="5">5</option>
    <optionvalue="6">6</option>
    <optionvalue="other">OtherReason</option>
    </select>
    <divid="otherdetail"style="display:none;">
    <tableborder="2"width="300"height="20">
    <tr>
    <td></td>
    <td></td>
    </tr>
    </table>
    </div>
    <divid="otherdetail1"style="display:none;">
    <tableborder="2"width="300"height="20">
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>
    </div>
    <divid="otherdetail2"style="display:none;">
    <tableborder="2"width="300"height="20">
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>
    </div>
    <divid="otherdetail3"style="display:none;">
    <tableborder="2"width="300"height="20">
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>       
    <td></td>
    <td></td>
    </tr>
    </table>
    </div>
    <divid="otherdetail4"style="display:none;">
    <tableborder="2"width="300"height="20">
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>       
    <td></td>
    <td></td>       
    <td></td>
    <td></td>
    </tr>
    </table>
    </div>
    <divid="otherdetail5"style="display:none;">
    <tableborder="2"width="300"height="20">
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>
    </div>
    </body>
    </html>

Answer 1

你需要在myfunction开头隐藏所有表格，如下所示

function myfunciton()
{

  // hide all tables first
  optOtherReason1.style.display='none';
  optOtherReason2.style.display='none'; 
  optOtherReason3.style.display='none';  
  optOtherReason4.style.display='none';// hide all tables whatever you have
}

Answer 2

尝试在设置/更新新值之前重置值。

示例

将Table1设置为block
更改为2
将Table1设置为none
将Table2设置为block
...

如何在更改选择选项时更新变量？

2 个答案: