javascript - 如何查看初始值 .Select/Option
解决方案
您需要执行几个步骤来解决此问题:
为选项增加价值
<option value="showen">Name of the brands</option>
为切换内容添加新功能
toggleContent
。添加
toggleContent($("#dropdown").val());
到脚本的末尾。此代码应在页面初始化后显示内容。
$(document).ready(function() {
function toggleContent(val) {
$('.loader').fadeIn();
$(".video").hide();
$(".showss").hide();
$("#" + val).hide();
setTimeout(function() {
$('.loader').fadeOut();
$("#" + val).show();
}, 1500);
}
$("#dropdown").change(function() {
var val = $(this).val();
toggleContent(val)
});
toggleContent($("#dropdown").val());
});
body {
background-color: #000;
}
.loader {
border: 10px solid #fff;
/* Light grey */
border-top: 10px solid #3498db;
/* Blue */
border-radius: 50%;
width: 80px;
height: 80px;
animation: spin 2s linear infinite;
position: absolute;
top: 48%;
left: 48%;
display: none;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@media screen and (max-width: 475px) {
.loader-video {
border: 8px solid #fff;
/* Light grey */
border-top: 8px solid #3498db;
/* Blue */
border-radius: 50%;
width: 60px;
height: 60px;
top: 48%;
left: 48%;
}
}
@media screen and (max-width: 384px) {
.loader {
border: 8px solid #fff;
/* Light grey */
border-top: 8px solid #3498db;
/* Blue */
border-radius: 50%;
width: 50px;
height: 50px;
top: 48%;
left: 48%;
}
}
@media screen and (max-width: 320px) {
.loader {
border: 8px solid #fff;
/* Light grey */
border-top: 8px solid #3498db;
/* Blue */
border-radius: 50%;
width: 50px;
height: 50px;
top: 48%;
left: 48%;
}
}
<div class="container">
<div class="form-group container">
<select class="form-control" id="dropdown">
<option value="showen">Name of the brands</option>
<option value="carsvideo1">Acura</option>
<option value="carsvideo2">Abarth</option>
<option value="carsvideo3">Alfa Romeo</option>
<option value="carsvideo4">Audi</option>
</select>
</div>
</div>
<div class="container text-center">
<div class="loader"></div>
</div>
<div class="container">
<h2 style="color:yellow;" class="showss text-center" id="showen">Main Content</h2>
</div>
<!--Hidden Content-->
<div class="video" id="carsvideo1">
<div class="container">
<h2 class="text-center" style="color:red">Acura Video</h2>
</div>
</div>
<div class="video" id="carsvideo2">
<div class="container">
<h2 class="text-center" style="color:blue">Abarth Video</h2>
</div>
</div>
<div class="video" id="carsvideo3">
<div class="container">
<h2 class="text-center" style="color:green">Alfa Romeo Video</h2>
</div>
</div>
<div class="video" id="carsvideo4">
<div class="container">
<h2 class="text-center" style="color:white">Audi Video</h2>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
推荐阅读
- node.js - 可以将异步函数传递给 setImmediate 以异步调用任意函数吗?
- javascript - 将相关对象合并为一个对象数组?(javascript)
- python - h2o.ai AutoML 不断重复模型对象的详细信息。如何抑制此输出?
- bash - 在bash中组合多个csv文件,将行分成不同的行
- javascript - 替换 1 个文本字段的功能词,但不适用于多个字段
- python - RNN - RuntimeError:输入必须有 3 个维度,得到 2
- php - Laravel 8 (xampp)
- kotlin - 用分隔符连接 3 个字符串
- arrays - 由于字符串存储为字符数组,那么为什么在这个问题中存储字符串而不初始化字符数组?
- mysql - MySQL - 如何从列中列出 JSON 数据的所有键名