javascript - 在JS中使用条件语句显示选择字段

Question

我正在为无法访问安全网站的人们设计一个自助服务网站。我希望它根据之前每个下拉框的答案生成包含有关其情况的问题的下拉菜单。我正在尝试使用 JS 和 条件语句 来完成此任务。我不是程序员，但我足以对其进行逆向工程。这是我到目前为止所拥有的。

<select id="location" name="location" onclick='test()'>
  <option value="0">Is this a personal computer or government computer?</option>
  <option value="home">Personal</option>
  <option value="gfe">Government</option>
</select>

<select id="home" name="home" style="display: none" onclick='test()'>
  <option value="0">Do you have a CAC?</option>
  <option value="1">Yes</option>
  <option value="2">No</option>
</select>

<select id="multi-cac" name="multi-cac" style="display: none" onclick='test()'>
  <option value="0">How many CACs do you have?</option>
  <option value="1">1</option>
  <option value="2">More than 1</option>
</select>

<select id="gfe" name="gfe" style="display: none" onclick='test()'>
  <option value="0">Is this a shared computer?</option>
  <option value="1">Yes</option>
  <option value="2">No</option>
</select>

<select id="shared" name="shared" style="display: none" onclick='test()'>
  <option value="0">Can other people access OWA on it?</option>
  <option value="1">Yes</option>
  <option value="2">No</option>
</select>

<select id="overseas" name="overseas" style="display: none" onclick='test()'>
  <option value="0">Have you recently returned from an overseas deployment?</option>
  <option value="1">Yes</option>
  <option value="2">No</option>
</select>

<div id="overseas-answer" style="display: none" onclick='test()'>
  Please visit <a href="https://www.dmdc.osd.mil/milconnect">Milconnect</a> and update your profile. Please wait 24 hours and try accessing your email again. If this does not work, please contact the help desk  
</div>    

function test() {
  if (document.getElementById('location').value == 'home') {
    document.getElementById('home').style.display = 'block';
  } else {
    document.getElementById('home').style.display = 'none';
  }

  if (document.getElementById('location').value == 'gfe') {
    document.getElementById('gfe').style.display = 'block';
  } else {
    document.getElementById('gfe').style.display = 'none';
  }

  if (document.getElementById('gfe').value == '1') {
    document.getElementById('shared').style.display = 'block';
  }  else {
    document.getElementById('shared').style.display = 'none';
  }

  if (document.getElementById('shared').value == '1') {
    document.getElementById('overseas').style.display = 'block';
  } else {
    document.getElementById('overseas').style.display = 'none';
  }

  if (document.getElementById('overseas').value == '1') {
    document.getElementById('overseas-answer').style.display = 'block';
  } else {
    document.getElementById('overseas-answer').style.display = 'none';
  }
}

我遇到的问题是我不知道如何编写代码来表示“如果 gfe 的值为 1，则显示共享。如果 gfe 的值为 2，则显示 multicac”。当我尝试编写此内容时，它要么不起作用，要么显示我不希望用户看到的下拉菜单。

http://jsfiddle.net/JKqWf/341/这是它的链接。

我这样做错了吗？有没有更简单的方法来做到这一点？

提前致谢。

Answer 1

您所遇到的问题是...当test时被称为它下降并击中每个 if并尝试获取每个下拉列表显示或不显示的值。您只想担心 select已更改。

对于每个选择执行此操作...

<select id="location" name="location" onchange='test(this.id, this.value)'>

然后是test ...

function test(id, val){
  if(id == "location"){
    handleLocationValues(val);
  }
  else if(id == "home"){
    handleHomeValues(val);
  }
  ...
  ...
}

然后你就可以让你的“句柄值”functions像这样...

function handleLocationValue(val){
  if(val == "home"){
    // write code to show the home drop down..
  }
  else if{val == "gfe"){
    // write code to show the gfe drop down...
  }
  ...
}

如果用户返回并更改之前的 select 之一，您还需要编写逻辑你隐藏了所有可见的selects在它下面。

我注意到在你的 fiddle 中你选择了 jquery 作为框架之一。如果您将其拉入，那么我建议考虑使用它，因为它可以使这变得更加容易。它还会让您不使用内联事件和样式。

我希望这有帮助，祝你好运。