php - 在 HTML/PHP 中显示/隐藏 div

Question

我正在学习 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>

我在页面底部添加了如下代码，但它不起作用

<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') ? 'block' : 'none');
}); 
</script>

我想隐藏 fileupload_block 并且只希望在用户从下拉列表中选择 image 或 video 时显示。让我知道是否有人可以帮助我。

我的整页如下

<?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");?>

谢谢

Answer 1

如果我正确理解你的问题，你需要做的就是添加一个“或”语句:

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