Javascript 显示不会根据所选选项进行更改_Javascript_Html_Css

Javascript 显示不会根据所选选项进行更改

javascript html css

Javascript 显示不会根据所选选项进行更改,javascript,html,css,Javascript,Html,Css,这些是与标题中提到的问题相关的代码摘录。请帮忙。谢谢。（开始时显示div id=“1”，并且在更改所选选项时仍会显示 <!DOCTYPE html> <html> <head> <title>CourseID-<?php echo $_POST['kp']."-Self Test ".$_POST['tn'];</title> <meta charset="utf-8">

这些是与标题中提到的问题相关的代码摘录。请帮忙。谢谢。（开始时显示div id=“1”，并且在更改所选选项时仍会显示

   <!DOCTYPE html> 
<html>
<head>
    <title>CourseID-<?php echo $_POST['kp']."-Self Test ".$_POST['tn'];</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
    <script src="http://code.jquery.com/jquery-[version].min.js"></script>
    <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
<script type="text/javascript">
function displayType()
{

var e = document.getElementById("ansType");
var check = e.options[e.selectedIndex].value;

  if(check=="T")
  {
      document.getElementById("1").style.display = "none";
      document.getElementById("2").style.display = "block";
      document.getElementById("3").style.display = "none";
      document.getElementById("4").style.display = "none";
  }
  else if(check=="D")
  {
      document.getElementById("1").style.display = "none";
      document.getElementById("2").style.display = "none";
      document.getElementById("3").style.display = "block";
      document.getElementById("4").style.display = "none";
  }
  else if(check=="TD")
  {
      document.getElementById("1").style.display = "none";
      document.getElementById("2").style.display = "none";
      document.getElementById("3").style.display = "none";
      document.getElementById("4").style.display = "block";
  }
  else
  {
      document.getElementById("1").style.display = "block";
      document.getElementById("2").style.display = "none";
      document.getElementById("3").style.display = "none";
      document.getElementById("4").style.display = "none";
  }
}
</script>
</head>
<body>
<form action="" method="" enctype="">
<div class="form-group">
<div id="buttons">
  <label for="sel1" id="selside">INPUT TYPE (select one):</label>
      <select class="form-control" id="ansType" style="width:300px;" onchange="displayType()">
        <option value="M">A</option>
        <option value="T">B</option>
        <option value="D">C</option>
        <option value="TD">D</option>
      </select>
<br><br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="display">
<div id="1" style="display:block">
<div class="radio">
      <label><input type="radio" name="o1"> <input type="text" class="form-control" id="opt1"></label>
</div>
<div class="radio">
      <label><input type="radio" name="o2"><input type="text" class="form-control" id="opt2"></label>
</div>
<div class="radio">
      <label><input type="radio" name="o3"><input type="text" class="form-control" id="opt3"></label>
</div>
<div class="radio">
      <label><input type="radio" name="o4"><input type="text" class="form-control" id="opt4"></label>
</div>
</div>

<div id="2" style="display:none">
<div id="area"><textarea cols="100" rows="5" class="form-control"></textarea><div><br>
</div>

<div id="3" style="display:none">
<div id="up"><input type="file" name="fileToUpload" id="fileToUpload"></button></div>
</div>

<div id="4" style="display:none">
<div id="area"><textarea cols="100" rows="5" class="form-control"></textarea><div><br>
<div id="up"><input type="file" name="fileToUpload" id="fileToUpload"></button></div>
</div>
</div>
</div>
</form>
<br>
</body>
</html>


课程ID-
函数显示类型（）{
var check=$（'#testtype'）.val（）；
$（'.output'）.hide（）；
如果（检查==“T”）{
$（'#2'）.show（）；
}
否则如果（勾选=“TH”）{
$（'#3'）.show（）；
}
否则如果（勾选=“F”）{
$（'#4'）.show（）；
}
否则{
$（'#1'）.show（）；
}
}
。结果{
显示：无；
}
.主动{
显示：块；
}

测试类型（选择一种）：
1.
2.
3.
4.
测试1
测试2
测试3
测试4
第一次将testType
更改为testType

您也可以像这样获得下拉列表的值
var e = document.getElementById("testtype");
var check = e.options[e.selectedIndex].value;


函数显示类型（）
{
var e=document.getElementById（“anstype”）；
var check=e.options[e.selectedIndex]。值；
如果（检查==“T”）
{
document.getElementById（“1”）.style.display=“无”；
document.getElementById（“2”）.style.display=“block”；
document.getElementById（“3”）.style.display=“无”；
document.getElementById（“4”）.style.display=“无”；
}
否则如果（勾选=“D”）
{
document.getElementById（“1”）.style.display=“无”；
document.getElementById（“2”）.style.display=“无”；
document.getElementById（“3”）.style.display=“block”；
document.getElementById（“4”）.style.display=“无”；
}
否则如果（勾选=“TD”）
{
document.getElementById（“1”）.style.display=“无”；
document.getElementById（“2”）.style.display=“无”；
document.getElementById（“3”）.style.display=“无”；
document.getElementById（“4”）.style.display=“block”；
}
其他的
{
document.getElementById（“1”）.style.display=“block”；
document.getElementById（“2”）.style.display=“无”；
document.getElementById（“3”）.style.display=“无”；
document.getElementById（“4”）.style.display=“无”；
}
}

输入类型（选择一种）：
A.
B
C
D







这是一个输入错误。使用document.getElementById（“testtype”）
而不是document.getElementById（“testtype”）
。或者您当然可以将ID更改为testtype
。谢谢，但它仍然不起作用var e=document.getElementById（“testtype”）；var check=e.options[e.selectedIndex].value；将该代码放在if条件之前。您还需要放置CDN。-谢谢Xufox。我现在已更改了我的问题。请查看您是否可以解决。-谢谢Kirtan-我现在已编辑了我的问题-请查看您是否可以解决-再次感谢-谢谢-我已编辑了我的问题-它不起作用，但我以前的问题已解决-非常感谢-我刚才发布的代码无法根据所选选项更改显示-谢谢，因为我可以看到您的代码，您有值'M，t，D，TD'，但在您的脚本中，您对't，TH，F'进行了检查。考虑到这些检查，它工作正常。因此，您需要检查下拉列表中的值，条件是yo您正在尝试匹配。请检查并让我知道-似乎div id=“3”和div id=“4”“C”显示的是输入类型文件，“D”显示的是上面代码段中的文本区域和输入类型文件。请检查此处的屏幕截图，并-感谢您帮助Nick-我已编辑了我的问题-请查看是否有解决方案-再次感谢