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。（希望有道理）

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

谢谢， SEB

Answer 1

你能看看这种方法并检查它是否有帮助：

DateTimeToArrayTransformer on github

Answer 2

下拉列表

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

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

Bootply Link

myFunction（）使用attr获取单击的href的URL，并从代码中获取HTML实体的iframe并将其转换为HTML对象，然后将HTML实体写回代码。

使用下拉列表更改代码

2 个答案: