Question

我遇到如下问题。我在我的网站上嵌入了一个带有inframre标签的图表。我的网站有一个选项标签。如何在选择选项2时将iframe中的url 1更改为url2，在选择选项3时如何将url3更改为url3。解决方案将非常感激。示例：

  <iframe src="url1"></iframe>
    <select id "select">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>

我找到了一个非常简单的解决方案。这是我的解决方案。

<iframe src="url1" id="urlFrame"></iframe>
<select id="tuyencap" onchange="changeValue(this)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<script type="text/javascript">
function changeValue(){
    var tuyencap = document.getElementById("tuyencap").value;
  alert(tuyencap)
   if (tuyencap ==1){
       document.getElementById('urlFrame').src="url1";
       }
    else if (tuyencap ==2){
         document.getElementById('urlFrame').src="url2";

        }
   else if (tuyencap ==3){
         document.getElementById('urlFrame').src="url3";

        }
   else if (tuyencap ==4){
         document.getElementById('urlFrame').src="url4";

        }
}
</script>

Answer 1

对onchange元素

使用select

<iframe src="url1" id="urlFrame"></iframe>
<select id = "select" onchange="changeValue(this)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

使用Javascript：

function changeValue(element){
    var value = element.value;
    document.getElementById('urlFrame').src = value;
}

注意您的选项的值应该是您打算使用的URL，而不是：

<option value="1">1</option>

我希望你应该有类似的东西：

<option value="http://google.com">1</option>

编辑1

您也可以使用innerHTML，但我不认为它具有良好的用户体验

<option value="1">http://google.com</option>

__

var value = element.innerHTML; document.getElementById('urlFrame').src = value;

编辑2

与@LelioFaieta建议您可以使用data.*属性：

<option data-url="http://google.com" value="1">1</option>

使用Javascript：

function changeValue(element){ var urlSelect = element.dataset.url; document.getElementById('urlFrame').src = urlSelect; }

Answer 2

如果需要，可以使用数据属性。

<iframe src="url1" id="urlFrame"></iframe>
<select id="select" onchange="changeValue(this)">
  <option value="1" data-url="url1">1</option>
  <option value="2" data-url="url2">2</option>
  <option value="3" data-url="url3">3</option>
  <option value="4" data-url="url4">4</option>
</select>

function changeValue(){
   var x = document.getElementById("select");
   var myoption = x.options[x.selectedIndex];
   var urlSelect = myoption.dataset.addr;
   alert('urlSelect = '+urlSelect);
   document.getElementById('urlFrame').src = urlSelect;
}

dataset属性是读取选项标记中所有数据属性的属性。

Answer 3

嗨，请检查下面的代码，它的工作非常好。您只需根据您的要求更改路径

 <html>
 <head>
      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 </head>
     <iframe height="800px" width="800px" 
     src="http://cdns2.freepik.com/free-photo/facebook-logo_318-49940.jpg" 
     id="imageToSwap" class="profile"></iframe>
          <select onchange="$('#imageToSwap').attr('src', 
          this.options[this.selectedIndex].value);">
        <option value="http://cdns2.freepik.com/free-photo/facebook-
         logo_318-49940.jpg" selected>Facebook</option>
        <option value="http://cdns2.freepik.com/free-photo/twitter-logo_318-
        40459.jpg">Twitter</option>
    </select>

更改inframe标记中的网址

3 个答案: