[英]Write a function inside a jquery if an option of select field is selected
在编辑播客时，我正在通过PHP代码选择一个选项，现在我想编写一个j查询，如果从选择字段中选择了该选项。
我在Stack Overflow中经历了很多问题和答案，但是所有这些似乎都在点击偶数或更改事件中输出效果。
<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-query如果用户正在尝试添加帖子但是在编辑帖子时我的j-query代码不能像预期的那样工作。 以下是我在添加播客时编写的代码。
$('#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();
}
});
您可以将2个事件合二为一。
$('#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>
在收听更改事件之前，您需要在页面加载时初始化输入状态
<?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输出javascript
[英]using jquery to output javascript when an option selected from select field
jQuery Multi Select Option-检查是否选择了一个选项
[英]jQuery Multi Select Option - Check if a option is selected or not
的value属性 <option>内<select>不是通过$ .each jQuery函数添加的
[英]The value attribute of <option> inside <select> is not added through the $.each jQuery function
Jquery在.each（）函数内的另一个选定选项中更改选项的文本
[英]Jquery change text of an option in another selected option which is inside an .each() function
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.