Java脚本显示隐藏字段

Java Script Display Hidden Field

本文关键字：字段 隐藏 显示 脚本 Java      更新时间：2024-07-04

我在HTML中有一个带有一些选项的select，我要做的是对每个不同的所选选项进行"取消隐藏"或显示另一组选项。希望这是有道理的。所以我有一个下拉选项，比如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 = '';
    }
}

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

尝试使用此代码：

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

在Js FIddle 中试用

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

不要使用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

使用更改

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 = '';
    }
   }

OKkkkk大家好，我发现了这个问题，发生的是我有我的HTML&JS文件都是从不同的目录打开的：D所以我对JS文件所做的更改并没有影响我在浏览器中看到的HTML文件。真的很抱歉我的错误，伙计们，上1

相关文章：