根据选择标签选项显示内容
我正在尝试使用下拉搜索选择器来打开基于选择的内容，无论是通过搜索功能还是从下拉列表中选择，但是我无法让选择器正常工作。
我决定使用 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) {
}
千万里不及你1回答
-
墨色风雨
<A> 标记在 <OPTION> 标记内无效。<OPTION> 标签之间唯一允许的内容是文本。HTML 元素参考这就是选择器找不到该元素的原因。无需将视频 ID 存储在name属性的 <A> 标记中，只需将每个 <OPTION>的值设置为该 ID。然后整个 <SELECT>的val()在更改时成为该视频 ID。这是我对该部分标记的版本：<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 value="video_01">VIDEO #1</option> <option value="video_02">VIDEO #2</option> </optgroup></select><br/><br/><br/><br/><div class="select_div_desc"> <span class="video_span video_01">VIDEO #1 DESCRIPTION</span> <span class="video_span video_02">VIDEO #2 DESCRIPTION</span></div></div>这是我修改 JavaScript 的方式： $(".dropped").change(function() { var videoId = $(this).val(); $(".video_iframe, .video_span").hide(); $("#" + videoId + ", ." + videoId).show("slow"); });希望有帮助！
随时随地看视频慕课网APP
相关分类
JavaScript