Question

我试图通过下拉搜索选择器打开基于选择的内容，无论是通过搜索功能还是通过下拉选择，但是我无法使选择器正常工作。

我决定使用select2代替自定义的下拉搜索选择器。有了这个，我不得不使用参考指向CSS和JS文件的直接链接。由于某些原因，无法在本地引用文件。我遇到的新问题是，当我选择一个选项时，两个选项都会显示。我在哪里弄错了？

有关我已经尝试过的操作，请参见以下代码：

<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../CSS/select2.min.css" rel="stylesheet" />
<script src="../JS/select2.min.js"></script>
<script src="../JS/jquery-3.3.1.slim.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>

<style>
@font-face {
 font-family:"Poppins";
 src: url("../Font/Poppins/Poppins-Regular.woff") format('woff');
 font-weight: 600;
}
html {
 width: 100%;
 height: 100%;
 font-family: 'Poppins', sans-serif; 
 overflow: hidden;
}

.video_container {
 display: inline-block;
 width: 65vw;
 height: 80vh;
 float: left;
 margin-left: 1%;
}

.select_div_container {
 display: inline-block;
 width: 30vw;
 height: 80vh;
 float: left;
 postion: fixed;
}

.select_div_desc {
 width: 75%;
 height: 40vh;
 overflow: auto;
 margin-left: auto;
 margin-right: auto;
}

.video_iframe, .video_span {
 display: none;  
 height: 100%;
 width: 100%;
}

@media only screen and (max-width:480px) {
 .select_div_container {width: 100%; height: 45vh;}
 .select_div_desc {width: 100%; height: 60%;}
 .video_container {width: 100%; height: 40vh;}
}

@media screen and (min-width: 769px) and (max-width: 1400px) {

}

@media screen and (min-width: 1401px) and (max-width: 1920px) {

}
</style>
<script>
$(document).ready(function() {
 $('.dropped').select2();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
     $(".dropped").change(function() {
         var val= $(this).find("option a").attr('name');
         $(".video_iframe").show("slow");
         $(".video_span").show("slow");
         $("#"+val).show("slow");
         $("."+val).show("slow");
     });    
 });   
</script>
</head>
<body>

<div class="select_div_container"><select class="dropped" style="width: 100%;" > <option value="" selected disabled hidden>Select a Training Video</option><optgroup label="DROPPER"><option><a name="video_01">VIDEO#1</a></option><option><a name="video_02">VIDEO #2</a></option></optgroup></select><br><br><br><br><div class="select_div_desc"><span class="video_span" class="video_01">VIDEO #1 DESCRIPTION</span><span class="video_span" class="video_02">VIDEO #2 DESCRIPTION</span></div></div>

<div class="video_container">
 <iframe class="video_iframe" id="video_01"  src="https://www.youtube-nocookie.com/embed/d9zEho-gQd9zE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 <iframe class="video_iframe" id="video_02" src="https://www.youtube-nocookie.com/embed/_9zEhpAYoYo-g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</body>
</html>

Answer 1

标记在 HTML Elements Reference这就是为什么您的选择器找不到该元素的原因。

代替将视频ID存储在 name 属性的标签中，只需将每个

根据选择标签选项显示内容

1 个答案: