Question

我有index.html，在我的index.html中，我有两个下拉容器和iframe。

但是它在iframe的下拉列表中有效，而下拉列表2无效，任何人都可以解决此问题吗？

我对此脚本感到困惑，无法更改iframe：

function iframeChange() {
var buttons = document.querySelector(".dropdown-container");
var iframe = document.getElementById('frame');
var mySelect = document.getElementById('mySelect');

buttons.addEventListener("click", function (e) {
  mySelect.src = e.target.dataset.src;
  mySelect.id = e.target.dataset.id;
  mySelect.width = e.target.dataset.width;
  mySelect.height = e.target.dataset.height;
  mySelect.title = e.target.dataset.title;
  iframe.src = e.target.dataset.src;
  iframe.width = e.target.dataset.width;
  iframe.height = e.target.dataset.height;
  iframe.title = e.target.dataset.title;
});
  }

  window.onload = iframeChange;

我的脚本在本地PC中运行

<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<button id="mySelect" class="dropdown-btn">BCA - SALES 
  <i class="fa fa-caret-down"></i>
</button>
<div id="mySelect" class="dropdown-container">
  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=83e3821d-2afc-45bd-be16-7d95a1065a8d&opt=currsel" data-width="100%" data-height="550px">DASHBOARD I</a></li>
  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=828499e7-da76-4f1c-aa43-b4accbfbd203&opt=currsel" data-width="100%" data-height="550px">DASHBOARD II</a></li>
  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=89c0893e-d526-4af3-aaf8-68a1d54cb96d&opt=currsel" data-width="100%" data-height="550px">DASHBOARD III</a></li>
  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=7b3fe051-8219-469f-994b-7ea249ee2b73&opt=currsel" data-width="100%" data-height="550px">DASHBOARD IV</a></li>
</div>
<button id="mySelect" class="dropdown-btn">BCA - MARKETING 
  <i class="fa fa-caret-down"></i>
</button>
<div id="mySelect" class="dropdown-container">
  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=83e3821d-2afc-45bd-be16-7d95a1065a8d&opt=currsel" data-width="100%" data-height="550px">DASHBOARD I</a></li>
  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=828499e7-da76-4f1c-aa43-b4accbfbd203&opt=currsel" data-width="100%" data-height="550px">DASHBOARD II</a></li>
  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=89c0893e-d526-4af3-aaf8-68a1d54cb96d&opt=currsel" data-width="100%" data-height="550px">DASHBOARD III</a></li>
  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=7b3fe051-8219-469f-994b-7ea249ee2b73&opt=currsel" data-width="100%" data-height="550px">DASHBOARD IV</a></li>
</div>

我预期的2下拉列表有效。

源文件： https://github.com/GoLeR797370/Perpustakaan23.git 下载mashup.html

Answer 1

首先：

因此，ID应该是唯一的，如果要对多个元素使用相同的属性，请使用类！

第二个问题

var mySelect = document.getElementById（'mySelect'）; 他只找到第一个孩子：

<li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=83e3821d-2afc-45bd-be16-7d95a1065a8d&opt=currsel" data-width="100%" data-height="550px">DASHBOARD I</a></li>

或

  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=83e3821d-2afc-45bd-be16-7d95a1065a8d&opt=currsel" data-width="100%" data-height="550px">DASHBOARD I</a></li>

第三个问题

pls显示完整的代码，包括。您的框架

iframe更改Sidenav多个下拉列表

1 个答案: