javascript - 更改 iframe 标签中的 url

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

对 select 元素使用 onchange

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