Question

我会尽量保持这个简单，尝试创建一个表单，当完成页面将被打印，在表单上我想3-4下拉列表，是或否选项，一些下拉列表将打开如果答案是肯定的，那么无论答案如何，表格上的下一个隐藏的div都会打开特定的部分。

是的，我不能使用PHP或Jquery必须使用纯javascript

<!DOCTYPE html>
<html>

<body>

<select  onchange="showHideInput(this)">
<option value="0" ></option>
    <option value="1" >Yes</option>
    <option value="2">No</option>
</select>

<select onchange="showHideInput(this)">
<option value="3" ></option>
    <option value="4" >Yes</option>
    <option value="5">no</option>
</select>

<div  id="dropone" style="display:none;">`enter code here`
     words</label>
    <div >
        <input id="a" type="text" name="b" value="" />
    </div>

<div  id="droptwo" style="display:none;">
     more words</label>
    <div >
        <input id="a" type="text" name="b" value="" />
    </div>



</body>

<script>
function showHideInput(sel) {
    var value = sel.value; 
    if(value==1)
        document.getElementById('dropone').style.display = 'block';
    if(value==2)
            document.getElementById('dropone').style.display = 'none';
if(value==4)
        document.getElementById('droptwo').style.display = 'block';
    if(value==5)
        document.getElementById('droptwo').style.display = 'none';


};
</script>
</html>

现在我承认我不是最好的，但我的问题是我只能稍微使用我在这里所拥有的东西但是如果答案是肯定的话我只想让dropone工作当答案不是两个时，它会继续工作。

任何帮助都非常受欢迎！

Answer 1

1.你的开放式关闭标签不匹配，droptwo是dropone。 2.如果您对值进行硬编码，那么扩展到3-4下拉列表并不是很好，所以我重新编写了一些代码

function showHideSwitcher(elementIdToShow) {
  return {
    showHideInput: function(sel, showOnValue) {
      var currentValue = sel.value;
      if (currentValue === showOnValue + "") {
        document.getElementById(elementIdToShow).style.display = 'block';
      } else {
        document.getElementById(elementIdToShow).style.display = 'none';
      }
    }
  }
}

var dropone = showHideSwitcher("dropone");
var droptwo = showHideSwitcher("droptwo");

<select onchange="dropone.showHideInput(this, 1)">
    <option value="0" ></option>
    <option value="1" >Yes</option>
    <option value="2">No</option>
</select>

<select onchange="droptwo.showHideInput(this, 4)">
    <option value="3" ></option>
    <option value="4" >Yes</option>
    <option value="5">no</option>
</select>

<select class="dropOneAlter" onchange="dropone.showHideInput(this, 1)">
    <option value="0" ></option>
    <option value="1" >Yes</option>
    <option value="0">no</option>
</select>

<select class="dropTwiAlter" onchange="droptwo.showHideInput(this, 'T')">
    <option value="F" ></option>
    <option value="T" >Yes</option>
    <option value="0">no</option>
</select>

<div id="dropone" style="display:none;">
  <label>`enter code here` words
  </label>
  <div>
    <input id="a" type="text" name="b" value="" />
  </div>
</div>
<div id="droptwo" style="display:none;">
  <label>more words</label>
  <div>
    <input id="a" type="text" name="b" value="" />
  </div>
</div>

Answer 2

我不完全确定你要问的是什么，但如果我认为你的大部分问题都可以通过在每个函数调用的开头隐藏你的元素来解决。尝试使用以下代码替换脚本标记中的代码：

<script>
function showHideInput(sel) {
    var value = sel.value;
    document.getElementById('dropone').style.display = 'none';
    document.getElementById('droptwo').style.display = 'none';
    if(value==1)
        document.getElementById('dropone').style.display = 'block';
    if(value==2)
            document.getElementById('dropone').style.display = 'none';
    if(value==4)
            document.getElementById('droptwo').style.display = 'block';
    if(value==5)
            document.getElementById('droptwo').style.display = 'none';
};
</script>

看看是否有帮助。

多个下拉菜单的纯javascript显示/隐藏

2 个答案: