在HTML/PHP中显示/隐藏div

我正在学习HTML和PHP。我用HTML开发了一个简单的表单。我想使文件上传选项隐藏。如果用户从下拉列表中选择图像或视频，我想显示文件上载部分。我一直在寻找实现这一目标的方法，但没有找到任何合适的方法。我的表格如下

        <div class="form-group">
                <label class="col-md-3 control-label">Category :-</label>
                <div class="col-md-6">
                  <select name="faq_type" id="faq_type" class="select2" required>
                      <option value="0">Text</option>
                      <option value="1">Image</option>
                      <option value="2">Video</option>
                  </select>
                </div>
              </div>

            <div class="form-group" style="display:none;" id="upload">
                <label class="col-md-3 control-label">Select Image/Video :-</label>
                <div class="col-md-6">
                  <div class="fileupload_block" >
                    <input type="file" name="au_picture" value="fileupload" id="fileupload">
                    <?php if(isset($_GET['cat_id']) and $row['au_picture']!="") {?>
                          <div class="fileupload_img"><img type="image" src="images/<?php echo $row['au_picture'];?>" alt="category image" /></div>
                        <?php } else {?>
                          <div class="fileupload_img"><img type="image" src="assets/images/add-image.png" alt="category image" /></div>
                        <?php }?>
                  </div>
                </div>
            </div>

<?php include("includes/header.php");

    require("includes/function.php");
    require("language/language.php");
    require_once("thumbnail_images.class.php");



    if(isset($_POST['submit']))
    {   

      if(!empty($_POST['question']) && !empty($_POST['answer']))
      {


          $question = $_POST['question'];
          $answer = $_POST['answer'];
         $insertQry = "INSERT INTO `faq`( `question`, `answer`) VALUES ('$question','$answer')"; 
        mysqli_query($mysqli, $insertQry);
        $_SESSION['msg']="10"; 
        header( "Location:faq.php");
        exit;   
      }
 else {
        $_SESSION['msg']="10"; 
        header( "Location:add_faq.php");
        exit;   
 }

    }   


?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#faq_type').on('change', function () {
     $("#upload").css('display', (this.value == '1' || this.value == '2') ? 'block' : 
      'none');
   }); 
</script>

       <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="page_title_block">
            <div class="col-md-5 col-xs-12">
              <div class="page_title">Add FAQ</div>
            </div>
          </div>
          <div class="clearfix"></div>
          <div class="card-body mrg_bottom">
            <form class="form form-horizontal" action="" method="post"  enctype="multipart/form-data" onsubmit="return checkValidation(this);">
              <div class="section">
                <div class="section-body">

                <div class="form-group">
                    <label class="col-md-3 control-label">Category :-</label>
                    <div class="col-md-6">
                      <select name="faq_type" id="faq_type" class="select2" required>
                          <option value="0">Text</option>
                          <option value="1">Image</option>
                          <option value="2">Video</option>
                      </select>
                    </div>
                  </div>

                <div class="form-group" style="display:none;" id="upload">
                    <label class="col-md-3 control-label">Select Image/Video :-</label>
                    <div class="col-md-6">
                      <div class="fileupload_block" >
                        <input type="file" name="au_picture" value="fileupload" id="fileupload">
                        <?php if(isset($_GET['cat_id']) and $row['au_picture']!="") {?>
                              <div class="fileupload_img"><img type="image" src="images/<?php echo $row['au_picture'];?>" alt="category image" /></div>
                            <?php } else {?>
                              <div class="fileupload_img"><img type="image" src="assets/images/add-image.png" alt="category image" /></div>
                            <?php }?>
                      </div>
                    </div>
                </div>

                  <div class="form-group">
                    <div class="col-md-3">
                      <label class="control-label">Question :-</label>
                    </div>
                    <div class="col-md-6">
                     <textarea name="question" id="question" rows="1" class="form-control" ></textarea> 
                    </div>
                  </div>


                  <div class="form-group">
                    <div class="col-md-3">
                      <label class="control-label">Answer:-</label>
                    </div>
                    <div class="col-md-6">
                     <textarea name="answer" id="answer" rows="1" class="form-control" data-emojiable="true"></textarea> 
                    </div>
                  </div>

                  <div class="form-group">&nbsp;</div>
                  <div class="form-group">
                    <div class="col-md-9 col-md-offset-3">
                      <button type="submit" name="submit" class="btn btn-primary">Save</button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div> 
<?php include("includes/footer.php");?>

---

谢谢

如果我正确理解您的问题，您只需添加一个“或”语句：

  $('#faq_type').on('change', function () {    
     $("#upload").css('display', (this.value == '1' || this.value == '2') ? 'block' : 
      'none');
   }); 

---

如果我正确理解您的问题，您只需添加一个“或”语句：

  $('#faq_type').on('change', function () {    
     $("#upload").css('display', (this.value == '1' || this.value == '2') ? 'block' : 
      'none');
   }); 

---

是的，但是它应该适用于1，没有OR语句，不是吗？谢谢，据我所知，你想在1号和2号上都显示div。这段代码做到了：我认为我的页面有问题，让我在这里发布完整的页面。感谢您的HTML和JS似乎按预期工作，我在这里尝试了：。你的php代码不应该对它有影响，因为“显示和隐藏”是纯JS功能…我不知道你会遇到什么样的错误..是的，但它应该在没有OR语句的情况下工作1，不是吗？谢谢，据我所知，你想在1号和2号上都显示div。这段代码做到了：我认为我的页面有问题，让我在这里发布完整的页面。感谢您的HTML和JS似乎按预期工作，我在这里尝试了：。你的php代码不应该对它有影响，因为“显示和隐藏”是纯JS功能…我不知道你会遇到什么样的错误。。