javascript - Javascript显示隐藏字段

Question

我在 HTML 中选择了一些选项，我想要做的是对于每个不同的选定选项，我想要“取消隐藏”或显示另一组选项。希望这是有道理的。因此，我有一个下拉选项，例如 1、2 如果用户选择选项，即 1，我想显示另一个下拉菜单。

问题是，选择后，第二个下拉菜单根本不显示。

HTML:

  <select id="workshop" name="workshop" onclick="return test();">
                <option value="">Please select a Workshop</option>
                <option value="f">1</option>
                <option value="b">2</option>
            </select>

            <select id="date" name="date" style="display: none">
                <option value="">Please select a date</option>
                <option value="01/01/01">01/01/01 at 6.30pm</option>
            </select>

JavaScript:

function test(){
   if(document.getElementById('workshop').value == 'f'){
      document.getElementById('date').style.display = 'block';
    }
    else{
      document.getElementById('date').style.display = '';
    }
}

Answer 1

首先使用onchange事件而不是使用onclick。因为 onchange 事件在元素的值发生更改时发生(根据您的要求)。

尝试使用以下代码:

function test(){
   if(document.getElementById('workshop').value == 'f'){
      document.getElementById('date').style.display = 'block';
    }
    else{
      document.getElementById('date').style.display = 'none';
    }
}

Try in Js FIddle