Question

我在HTML中选择了一些选项，我想要做的是为每个不同的选择选项我想要＆＃34;取消隐藏＆＃34;或显示另一组选项。希望这是有道理的。我有一个下拉选项，例如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

Answer 2

function test(){
    if(document.getElementById('workshop').value == 'Forex'){
    document.getElementById('date').style.display = 'inline-block';//try this
}else{
    document.getElementById('date').style.display = 'none';
}

Answer 3

请勿使用onclick事件。使用onchange：

<select id="workshop" name="workshop" onchange="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>

Onclick适用于按钮，但任何类型的输入都会对更改做出更好的反应。我打赌它会在你第二次点击第一个选择时出现。

PS：检查onkeyup或onkeydown时，文字输入和文字广告的效果会更好。

http://www.w3schools.com/jsref/event_onchange.asp

Answer 4

使用onchange

<强> HTML

<select id="leave" onchange="test()">
  <option value="">Please select a Workshop</option>
  <option value="f">1</option>
  <option value="b">2</option>
</select>

<强>的JavaScript

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

Answer 5

OKkkkk大家好，我发现了这个问题，我的HTML＆amp; JS文件都打开了不同的目录：D所以我对我的JS文件所做的更改并没有影响我在浏览器中操作的HTML文件。真的很抱歉我的错误让所有人都加入了1

Javascript显示隐藏字段

5 个答案: