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

根据所选的选择类别选项，div“ video_frame”和iframe不会显示。

Answer 2

抱歉，您将不得不自己替换YouTube情况。否则，我会为您修复所有问题，以便jQuery正常运行。

    <!DOCTYPE html>
<html>
    <head>
        <title>Drop Test</title>
        <style>
            .video_frame {
                background: #efefef;
                width: 50%;
                margin-left: auto;
                margin-right: auto;
                height: 75%;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>Bootstrap Select demo</h1>


            <select class="selectpicker" data-style="btn-info" multiple data-max-options="3" data-live-search="true">
                <optgroup label="Test">
                    <option id="vdo1" value="1">Test</option>
                </optgroup>
            </select>

        </div>


        <br><br>
        <div class="video_frame">
            <div style="width:40%;min-height:200px;"></div>
        </div>

        <script
            src="https://code.jquery.com/jquery-3.4.1.js"
            integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>
        <script>
            $(document).ready(function () {

                $(".video_frame").hide();

                $(".selectpicker optgroup option").click(function () {
                    $(".video_frame").show("slow");
                    var val = $(this).find("optgroup option").attr('value');
                    $("#" + val).show("slow");
                });
            });
        </script>
    </body>
</html>

只需将样式化的div替换为iframe。

主要问题是您的CSS设置为不显示视频。尝试show（）不会影响CSS的显示。您需要将其hide（）加载，并在选择时将其show（）。

另一个解决方案是使用

.css（'display'，'none'）onload

和

.css（'display'，'inline-block'）onselect

您仍然需要删除“ display：none;”。从CSS。

还有其他解决方案。

下拉搜索菜单

2 个答案: