时间戳

首页 > 解决方案 > 下拉搜索菜单

javascript - 下拉搜索菜单

问题描述

我试图让下拉搜索选择器根据选择打开内容，无论是通过搜索功能还是从下拉列表中选择，但是我无法让选择器正常工作。

********* 编辑*************** 我决定使用 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>

标签： javascriptjqueryhtmlcss

解决方案

div“video_frame”和 iframe 没有根据选择的选择类选项显示。

推荐阅读