【问题标题】：Reset Value of hidden field when dropdown selected (Javascript)选择下拉列表时重置隐藏字段的值（Javascript）
【发布时间】：2014-08-28 06:28:40
【问题描述】：

Got a form with a div dropdown which when select will display/hide another div.

<div>
    <select id="currency" name="currency" onChange="display_payroll_div(this.selectedIndex);">
        <option value="0">Currency for your quote*</option>
        <option value="AUD">AUD</option>
        <option value="USD">USD</option>
        <option value="Pounds">GBP</option>
    </select>
</div>
<div id="payroll-div">
    <select id="report-payroll" name="report-payroll">
        <option value="0">Would you like us to do payroll?*</option>
        <option value="1">Yes, I would like payroll</option>
        <option value="2">No, I don't need payroll</option>
    </select>
</div>

Javascript：

function display_payroll_div(e){
    currency_value=document.getElementById('currency').value;
    document.getElementById('payroll-div').style.display = "none";
    if (currency_value == 'AUD') {
        document.getElementById('payroll-div').style.display = "block";
    }
}

显示/隐藏很好，但我遇到的问题是当我选择“澳元”和“是的，我想要工资单”然后改变主意并更改为“美元”时，隐藏字段工资单仍将保持价值'是的，......'。有没有办法将“payroll-div”重置为默认值？

我看到的所有建议都使用“onClick”，我试图避免使用它，因为它在 FF 中不起作用。任何帮助将不胜感激:)

【问题讨论】：

无论如何你都应该使用 onchange。但是创建一个 jsfiddle.net 所以我们不必这样做。隐藏时是指document.getElementById("report-payroll").selectedIndex=0吗？

标签： javascript html forms drop-down-menu hidden

【解决方案1】：

参考：Reset the Value of a Select Box

将此添加到您的代码中：

else
{
 document.getElementById('report-payroll').selectedIndex = 0;
 //reseting value when currency_value != 'AUD'
}

DEMO

【讨论】：

【解决方案2】：

试试这个：

function display_payroll_div(e){
    currency_value=document.getElementById('currency').value;
    document.getElementById('payroll-div').style.display = "none";
    if (currency_value == 'AUD') {
        document.getElementById('payroll-div').style.display = "block";
    }
    else {
        document.getElementById('report-payroll').selectedIndex = 0;
    }
}

Working jsFiddle Demo.

【讨论】：

【解决方案3】：

如下修改函数

  function display_payroll_div(e){
      currency_value=document.getElementById('currency').value;
      document.getElementById('payroll-div').style.display = "none";
       if (currency_value == 'AUD') {
              document.getElementById('payroll-div').style.display = "block";
        } else {
        document.getElementById('report-payroll').value ='0';
      }
   }

JSFiddle Demo

【讨论】：

【解决方案4】：

你可以使用

document.getElementById('report-payroll').options[0].selected = true;

【讨论】：

【解决方案5】：

我建议这样做：

JSFIDDLE

1) 不显眼
2) 可以处理重载

<select id="currency" name="currency">

使用

window.onload=function() {
  document.getElementById("currency").onchange=function(){
    var currency_value = this.value, 
        payrollDiv     = document.getElementById('payroll-div');
    payrollDiv.style.display = currency_value=="AUD"?"block":"none";
    if (currency_value!="AUD") document.getElementById("report-payroll").selectedIndex=0;
  }
  document.getElementById("currency").onchange(); // hide or show when loading
}

【讨论】：