Выпадающее меню поиска - PullRequest
Новая
       3

Выпадающее меню поиска

0 голосов
/ 10 октября 2019

Я пытаюсь получить раскрывающийся селектор поиска, чтобы открыть контент на основе выбора, будь то с помощью функции поиска или выбора из выпадающего списка, однако я не могу заставить селектор работать должным образом.

********* РЕДАКТИРОВАТЬ ************* Я решил использовать 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>

Ответы [ 2 ]

0 голосов
/ 10 октября 2019

Извините, вам придется заменить ситуацию на 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 был установлен, чтобы не показывать ваше видео. Попытка показать () это не влияет на отображение CSS. Вам нужно скрыть () его загрузку и показать (), когда он выбран.

Другим решением будет использование

.css ('display', 'none') onload

и

.css ('display',' inline-block ') onselect

Вам все равно нужно удалить «display: none;»из css.

Возможно, есть и другие решения.

0 голосов
/ 10 октября 2019

Div "video_frame" и iframe не отображаются в зависимости от выбранной опции выбора класса.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...