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

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

javascript html

Javascript 如何在更改选择选项时更新变量？,javascript,html,Javascript,Html,这是html页面，其中包含JavaScript和html代码在这种情况下，如果我选择'1'，那么它将显示与id'1'匹配的表问题是: 如果我将值更改为'2'，它是否仍会保留'1'的表值，然后将数字“2”的值添加到表中 <html> <head> <scripttype="text/javascript"> window.onload =functionmyfunction(val){ vareSelect=documen

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

在这种情况下，如果我选择

'1'

，那么它将显示与

id'1'

匹配的表

问题是:

如果我将值更改为

'2'

，它是否仍会保留

'1'

的表值，然后将数字“2”的值添加到表中

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


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=函数（）
{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'；
}
其他的
{
optOtherReason.style.display='none'；
}
}
}
1.
2.
3.
4.
5.
6.
其他原因

您需要在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
}

在设置/更新新值之前，请尝试重置这些值

示例想法

将表1设置为

块

改为2

将表1设置为

none

将表2设置为

块

您的意思是，隐藏显示功能前面的表格？是的，您需要先隐藏所有表格，然后使用选定选项显示表格。这样，只有选定的表才可访问。您可以将此代码放在一些函数中，比如hidealTable（）{hide all tables here}，然后从myfunction（）{hidealTable（）…和您的其余代码}调用此函数。我确实使用样式：display“none”隐藏了所有表“是的，这是正确的，在myfunction开始时隐藏所有表，并保持代码的其余部分不变，但问题仍然存在。Bushan Kawadkar用一个代码示例发布了我的想法。