javascript - 使用下拉菜单自动更改代码

Question

我正在尝试弄清楚如何使用下拉菜单更改 HTML 代码。

这是我目前拥有的

<div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">Languages</button>
    <div id="myDropdown" class="dropdown-content">
        <a href="(URL LINK)/clients/1080/Canon.html?lc=uk" target="test">English</a>
        <a href="(URL LINK)/clients/1080/Canon.html?lc=de" target="test">German</a>
        <a href="(URL LINK)/clients/1080/Canon.html?lc=fr" target="test">French</a>
        <a href="(URL LINK)/clients/1080/Canon.html?lc=es" target="test">Spanish</a>
        <a href="(URL LINK)/clients/1080/Canon.html?lc=it" target="test">Italian</a>

    </div>
</div>

这会更改下拉列表下方的 iFrame。

 <iframe name="test" src="(URL LINK)/clients/1080/Canon.html?lc=uk" scrolling="no" seamless="seamless"></iframe>

在 iFrame 下，我有一个预代码显示如何嵌入上面的 iFrame。

<pre><code>&lt;iframe&gt;src="Path of the zip file" scrolling="no" seamless="seamless"&gt;&lt;/iframe&gt;
          </code></pre>

我正在使用 Javascript

    /* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

当用户单击下拉菜单并选择语言时，是否可以实现 iFrame 文件夹托管位置的链接更改？

例如，用户会单击下拉菜单并选择德语。预代码将显示带有德国文件夹链接的 iframe。 (希望这是有道理的)

如果有人可以帮助我，我将不胜感激。

我尝试过但失败了

Jquery

 myFunction() {
    $("#myDropdown > a").on('click', function(){
        var url= $(this).attr('href'); //Get URL from a href
        var $iframe = $('#iframeId'); // Get Iframe id
        $iframe.attr('src',url);    // Insert new URL

        var v= $('#code').text(); //get Iframe inside code tags
        var code = jQuery('<div />').html(v).text(); //Convert to HTML object
        var n = $(code).attr("src",val); //change the src
        var fin = $(n).prop("outerHTML"); //get the HTML
        var finHTML = jQuery('<div />').text(fin).html(); //Convert HTML into HTML entities
        $('#code').text(finHTML); // Change code HTML
    });
}

iFrame

<iframe src="#" id="iframeId"></iframe>

导出 iFrame(在文本中)

<pre><code id="code">&lt;iframe src="Path of the <strong>zip file downloaded from email</strong>" scrolling="no" seamless="seamless"&gt;&lt;/iframe&gt;
  </code></pre>

我已经尝试了上面的方法，但它使下拉菜单无法工作。如果有人能帮我解决这个问题，我将感激。

Answer 1

试试这个。它会改变 src的 iframe里面<pre>根据href点击的 <a> .

var myDropdown = document.getElementById('myDropdown');
var links = myDropdown.getElementsByTagName('a'); // get all links inside #myDropdown

function changeSRC(e) {
  var link = e.target.href;    // get href of clicked link
  var code = document.getElementsByTagName('code')[0];
  code.innerHTML = '<iframe>src="'+link+'" scrolling="no" seamless="seamless"></iframe>';
}

for( var i=0; i<links.length; i++) {
  links[i].addEventListener('click', changeSRC);    // call changeSRC function when any link is clicked
}

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Languages</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="(URL LINK)/clients/1080/Canon.html?lc=uk" target="test">English</a>
    <a href="(URL LINK)/clients/1080/Canon.html?lc=de" target="test">German</a>
    <a href="(URL LINK)/clients/1080/Canon.html?lc=fr" target="test">French</a>
    <a href="(URL LINK)/clients/1080/Canon.html?lc=es" target="test">Spanish</a>
    <a href="(URL LINK)/clients/1080/Canon.html?lc=it" target="test">Italian</a>

  </div>
</div>
<pre>
  <code>&lt;iframe&gt;src="Path of the zip file" scrolling="no" seamless="seamless"&gt;&lt;/iframe&gt;</code>
</pre>