我正在尝试使用下拉搜索选择器来打开基于选择的内容，无论是通过搜索功能还是从下拉列表中选择，但是我无法让选择器正常工作。我决定使用 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 回答
墨色风雨
TA贡献1853条经验 获得超6个赞
<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");
});
希望有帮助！
添加回答
举报
0/150
提交
取消