显示屏未根据所选选项更改

时间：2016-01-22 09:37:34

标签： javascript html css

这些是与标题中提到的问题相关的代码摘录。请帮忙。谢谢。（在开头div id =＆＃34; 1＆＃34;正在显示，当所选选项被更改时，它仍会显示。

   <!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>

2 个答案:

答案 0 :(得分：0)

首先将testType更改为testtype。

你也可以像这样获得下拉菜单的价值

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

＆＃13;
＆＃13; 
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";
  }
}
＆＃13; 
<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"></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"></div>
</div>
  
</div>
</div>
</form>
＆＃13;
＆＃13;
＆＃13;

更新：原因是您尚未正确关闭divs和inputs。

答案 1 :(得分：-1)

＆＃13;
＆＃13; 
function displayType() {
  var check = $('#testtype').val();
  $('.outcome').hide();
  
  if(check=="T") {
    $('#2').show();
  }
  else if(check=="TH") {
      $('#3').show();
  }
  else if(check=="F") {
     $('#4').show();
  }
  else {
     $('#1').show();
  }
}
＆＃13; 
.outcome {
  display: none;
}
.active {
  display: block;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="sel1" id="selside">Testing Type (select one):</label>
<select class="form-control" id="testtype" style="width:300px;" onchange="displayType()">
  <option value="O">1</option>
  <option value="T">2</option>
  <option value="TH">3</option>
  <option value="F">4</option>
</select>

<div id="display">
<div id="1" class="outcome active">
Testing1
</div>

<div id="2" class="outcome">
Testing2
</div>

<div id="3" class="outcome">
Testing3
</div>

<div id="4" class="outcome">
Testing4
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题