DEMO

Question

有一个带有div下拉列表的表单，当select选择将显示/隐藏另一个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";
    }
}

显示/隐藏很好但我遇到的问题是当我选择＆＃39; AUD＆＃39;并且＆＃39;是的，我想要工资单＆＃39;然后改变我的想法，改为＆＃39; USD＆＃39;隐藏的现场工资单仍将保持“是，......”的价值。无论如何重置＆＃39; payroll-div＆＃39;到默认值？

我见过的所有建议都使用了onClick＆＃39;我试图避免，因为它在FF中不起作用。任何帮助将不胜感激：）

Answer 1

试试这个：

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

Answer 2

参考： Reset the Value of a Select Box

在您的代码中添加：

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

DEMO

Answer 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

Answer 4

您可以使用

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

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

选中下拉列表时重置隐藏字段的值（Javascript）

5 个答案:

DEMO