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

【问题标题】：how to update the variable while changing the select option?如何在更改选择选项时更新变量？
【发布时间】：2014-05-02 16:25:13
【问题描述】：

这是一个 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>

【问题讨论】：

标签： javascript html

【解决方案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
}

【讨论】：

你的意思是，隐藏显示功能前面的表格？
是的，您需要先隐藏所有表格，然后显示带有选定选项的表格。这样只有选定的表才会可见。您可以将此代码放在某个函数中，比如说 hideAllTable(){ 在此处隐藏所有表} 然后从 myfunction() { hideAllTable() ... 和其余代码}.. 调用此函数
我确实使用 style:display“none” 隐藏了所有表格
是的，没错，在 myfunction 的开头隐藏所有表并保持其余代码不变
但问题仍然存在

【解决方案2】：

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

示例想法

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

【讨论】：

Bhushan Kawadkar 通过代码示例发布了我的想法。