基于选择菜单使用 jQuery 更改 iFrame src答案

【问题标题】：Changing iFrame src with jQuery based on select menu基于选择菜单使用 jQuery 更改 iFrame src
【发布时间】：2017-12-01 17:39:19
【问题描述】：

我正在尝试在 div 中显示 photosphere，其中 src 基于选择菜单中的值。

选择菜单将提供用户可以查看的不同房间，并且 div 将包含一个 iFrame 来显示照片球。

这是我目前所拥有的——它坏了（我将在下面解释）：

<!-- SCRIPT FOR PHOTOSPHERE-->
    <script>
        $(document).ready(function(){

            // SELECT MENU
            $("#mySelect").change(function(){
                var value = $(this).val();   

                //IFRAME TAG
                $("#myPhotoSphere").attr
                var src = ($(this).attr('src') === 'photosphere_example.png')   
                $(this).attr('src', src);

                // Classroom:
                if(value == "1")
                { $("#myPhotoSphere").attr("src","http://orb.photo/embedded_player.php?view=201712011cb4f0e032532a59807bea088f9ca145"); }

                //Common room:
                if(value == "2")
                { $("#myPhotoSphere").attr("src","http://orb.photo/embedded_player.php?view=20171201a1da59af307b44fa6dfa5ab2dfc157bd"); }

                //Lecture theatre: 
                if(value == "3")
                { $("#myPhotoSphere").attr("src","http://orb.photo/embedded_player.php?view=2017120169fafbe2c0a507bbb06284857b3ea427"); }

                //Atrium:
                if(value == "4")
                { $("#myPhotoSphere").attr("src","http://orb.photo/embedded_player.php?view=20171201a5853f710927d4a6b13909117b9ac85a"); }

                //Coffe Shop:
                if(value == "5")
                { $("#myPhotoSphere").attr("src"," http://orb.photo/embedded_player.php?view=20171201b19318b56e5168ce54ee5a2cc024c798"); }
            }); 
        });
    </script>

然后这里是html：

 <!-- VIRTUAL TOUR -->
        <select id="mySelect">
            <option value ="" disabled selected> Select a PhotoSphere </option>

            <option value="1"> Computing Classroom </option>
            <option value="2"> Common Room </option>
            <option value="3"> Leacture Theatre </option>
            <option value="4"> Atrium </option>
            <option value="5"> Coffee Shop </option>
        </select>

        <div>
            <iframe id="myPhotoSphere" src="http://orb.photo/embedded_player.php?view=201712011cb4f0e032532a59807bea088f9ca145" frameborder="0" scrolling="no" width="900" height="600">Please enable iframes to view content.</iframe>
        </div>

我不知道从这里继续下去，我一直在研究人们如何使用 jQuery 并更改某些部分（我对此感到有些困惑，但是，我碰壁了，不能'似乎没有解决）。

为任何令人尴尬的错误道歉（新手）..

【问题讨论】：

为什么不将value 的option 标记设置为要与该选项关联的URL。那么您只需要一种方法将src 设置为等于所选值onchange。您不需要所有这些 if 块。

标签： javascript jquery html css iframe

【解决方案1】：

您可以尝试这样的方法来简化它：

HTML

<!-- VIRTUAL TOUR -->
<select id="mySelect">
  <option value="" disabled selected> Select a PhotoSphere </option>
  <option value="http://www.google.com">Google</option>
  <option value="http://www.yahoo.com">Yahoo!</option>
  <option value="http://www.msn.com">MSN</option>
</select>

<div>
  <iframe id="myPhotoSphere" src="http://www.google.com" frameborder="0" scrolling="no" width="900" height="600"></iframe>
</div>

JAVASCRIPT

$(document).ready(function() {
  // SELECT MENU
  $("#mySelect").change(function() {
    var value = $(this).val();

    //IFRAME TAG
    console.log(value);
    $("#myPhotoSphere").attr('src', value);
  })
});

这是一个工作示例（链接仅加载此示例的其他 jsfiddle 版本）： https://jsfiddle.net/j94geqt5/3/

【讨论】：

这比我的简单多了。但是，它不会改变光球。
@Jordan，你确定吗？你试过我的jsfiddle链接吗？请注意，JSFiddle 会阻止对外部站点的请求，这就是为什么我在示例中的链接仅指向其他 jsfiddle URL。