ドロップダウンメニューを使ってコードを自動的に変更

Question

私はドロップダウンメニューでHTMLコードを変更する方法を見つけようとしています。

これは、私は現在、これは、ドロップダウンの下にあるiFrameを変更

<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 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> 

私は

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

を使用していJavascriptがそれは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

これを試してください。それはの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>