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

我一直在试图找出如何使用下拉菜单更改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>

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

我正在使用的Javascript

 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。希望这是有道理的

如果有人能在这方面帮助我，我将不胜感激

我尝试过但失败了

Jquery

iFrame

在文本中导出iFrame

---

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

试试这个。它将改变iframe内部的src 语言文字

---

为链接添加一个单击处理程序，并在其中将href属性的内容写入pre/code元素的innerHTML…@CBroe-Hi感谢您的评论，您能给我一个示例说明您的意思吗？我不是你说的Javascript高手。研究一下你不清楚的部分，然后试试看。如果您遇到问题，请用特定的问题描述更新问题。@CBroe-理解一些没有解释的东西是相当混乱的。即使是一个给我举个例子让我可以学习的网站，我也会很感激你的帮助。你试图解析pre元素中的文本，使事情变得相当复杂。只需在其中使用一个额外的元素，它只保存iframe src=/path/goes/here…，然后替换该元素的内容。//如果你尝试了一些东西，但它不起作用，那么请提供一个，这样我们就可以看看出了什么问题。非常感谢你：D这就是我一直在寻找的答案。。你绝对是个明星！

    /* 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');
      }
    }
  }
}

 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 src="#" id="iframeId"></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>