Question

在编辑播客时，我正在通过PHP代码选择一个选项，现在我想编写一个j查询，如果从选择字段中选择了该选项。

我在堆栈溢出中经历了很多问题和答案，但是所有这些似乎都在单击平均或更改事件中输出效果。

<div class="form-group pt-2 input-upload">
<label for="EditedBy">Podcast Type : </label>
<select class="form-control" name="podcast_type" id="podcast_type">
  <option selected disabled hidden>-- Select Any One --</option>
    <option id="audio1" name="audio1" value="audio1" >Audio</option>
    <option id="video1" name="video1" value="video1" >Video</option>
 </select>
 </div>                        
<div class="form-group" id="input-upload">
    <label for="avatar">Upload Audio:</label><br>
    <input type="file" class="upload" id="fileUp" name="audio">
</div>  

<div class="form-group" style="width:30%" id="input-file">
    <label for="Filename">Audio Duration: </label>
    <input id="infos" class="form-control" name="duration">
</div> 

<div class="form-group" id="input-upload-file">
    <label for="avatar">Video url:</label><br>
    <input type="url" name="link" id="link" class="form-control" placeholder="link" value="">
</div>

如果用户试图添加帖子，我已经编写了j查询，但是在编辑帖子时，我的j查询代码无法正常工作。以下是我在添加播客时编写的代码。

$('#podcast_type').change(function(){

    if($('#podcast_type').val() == 'audio1') {

        $('#input-upload').show(); 
        $('#input-file').show(); 
    } else {

        $('#input-upload').hide(); 
        $('#input-file').hide(); 

    } 

});

$('#podcast_type').change(function(){

    if($('#podcast_type').val() == 'video1') {

        $('#input-upload-file').show();

    } else {

        $('#input-upload-file').hide();

    } 

});

Answer 1

您可以将两个事件合二为一。

$('#podcast_type').change(function() {

  var val = $('#podcast_type').val();        //Get value of the select
  if (val == 'audio1') {                     //If audio, hide 1 input. Show 2
    $('#input-upload').show();
    $('#input-file').show();
    $('#input-upload-file').hide();
  } else if (val == 'video1') {              //If video, hide 2 input. Show 1
    $('#input-upload').hide();
    $('#input-file').hide();
    $('#input-upload-file').show();
  } else {
    $('#input-upload').hide();               //Hide all intially
    $('#input-file').hide();
    $('#input-upload-file').hide();
  }
}).change();                                 //Trigger change on load.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group pt-2 input-upload">

  <label for="EditedBy">Podcast Type : </label>
  <select class="form-control" name="podcast_type" id="podcast_type">
    <option selected disabled hidden>-- Select Any One --</option>
    <option id="audio1" name="audio1" value="audio1">Audio</option>
    <option id="video1" name="video1" value="video1">Video</option>
  </select>
</div>

<div class="form-group" id="input-upload">
  <label for="avatar">Upload Audio:</label><br>
  <input type="file" class="upload" id="fileUp" name="audio">
</div>
<div class="form-group" style="width:30%" id="input-file">
  <label for="Filename">Audio Duration: </label>
  <input id="infos" class="form-control" name="duration">
</div>

<div class="form-group" id="input-upload-file">
  <label for="avatar">Video url:</label><br>
  <input type="url" name="link" id="link" class="form-control" placeholder="link" value="">
</div>

Answer 2

在侦听更改事件之前，您需要在页面加载时初始化输入状态

<?php
    $podcast_type = 'audio1';
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="form-group pt-2 input-upload">
        <label for="EditedBy">Podcast Type : </label>
        <select class="form-control" name="podcast_type" id="podcast_type">
            <option disabled>-- Select Any One --</option>
            <option id="audio1" value="audio1" <?= ($podcast_type == 'audio1') ? 'selected' : '' ?>>Audio</option>
            <option id="video1" value="video1" <?= ($podcast_type == 'video1') ? 'selected' : '' ?>>Video</option>
        </select>
    </div>                        
    <div class="form-group" id="input-upload">
        <label for="avatar">Upload Audio:</label><br>
        <input type="file" class="upload" id="fileUp" name="audio">
    </div>
    <div class="form-group" style="width:30%" id="input-file">
        <label for="Filename">Audio Duration: </label>
        <input id="infos" class="form-control" name="duration">
    </div> 
    <div class="form-group" id="input-upload-file">
        <label for="avatar">Video url:</label><br>
        <input type="url" name="link" id="link" class="form-control" placeholder="link" value="">
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function() {
            var podcast = $('#podcast_type');
            var podcast_type = podcast.val();

            // Initialize input state on page load
            setPodcastType(podcast_type);

            podcast.change(function() {
                setPodcastType($(this).val());
            });

            function setPodcastType(podcast_type)
            {
                if (podcast_type == 'audio1') {
                    $('#input-upload').show(); 
                    $('#input-file').show();

                    // Hide video  input
                    $('#input-upload-file').hide();

                    return true;
                }

                $('#input-upload-file').show();

                // Hide audio input
                $('#input-upload').hide(); 
                $('#input-file').hide();
            }
        });
    </script>
</body>
</html>

如果选择了选择字段选项，则在jQuery中编写函数

2 个答案: